diff --git a/angular.json b/angular.json
index 742f216..640c269 100644
--- a/angular.json
+++ b/angular.json
@@ -31,7 +31,12 @@
                             "quill-delta",
                             "buffer",
                             "localforage",
-                            "moment"
+                            "moment",
+                            "bech32",
+                            "bn.js",
+                            "qrcode",
+                            "dayjs",
+                            "dayjs/plugin/relativeTime"
                         ],
                         "assets": [
                             {
diff --git a/package-lock.json b/package-lock.json
index 748a576..d56e248 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "angor-hub",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "angor-hub",
-            "version": "0.0.7",
+            "version": "0.0.8",
             "dependencies": {
                 "@angular-builders/custom-webpack": "^18.0.0",
                 "@angular/animations": "18.2.6",
@@ -91,7 +91,7 @@
                 "karma-jasmine-html-reporter": "2.1.0",
                 "lodash": "4.17.21",
                 "postcss": "8.4.47",
-                "prettier": "3.3.3",
+                "prettier": "^3.3.3",
                 "prettier-plugin-organize-imports": "4.1.0",
                 "prettier-plugin-tailwindcss": "0.6.8",
                 "tailwindcss": "3.4.13",
diff --git a/package.json b/package.json
index cc42593..89d96e3 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
         "test": "ng test",
         "deploy": "ng deploy",
         "version": "node -p \"require('./package.json').version\"",
-        "changelog": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
+        "changelog": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
+        "format": "prettier --write \"src/**/*.{ts,html,css,scss,json,js}\""
     },
     "dependencies": {
         "@angular-builders/custom-webpack": "^18.0.0",
@@ -98,7 +99,7 @@
         "karma-jasmine-html-reporter": "2.1.0",
         "lodash": "4.17.21",
         "postcss": "8.4.47",
-        "prettier": "3.3.3",
+        "prettier": "^3.3.3",
         "prettier-plugin-organize-imports": "4.1.0",
         "prettier-plugin-tailwindcss": "0.6.8",
         "tailwindcss": "3.4.13",
diff --git a/public/data/emoji.json b/public/data/emoji.json
deleted file mode 100644
index 6aa7136..0000000
--- a/public/data/emoji.json
+++ /dev/null
@@ -1,7612 +0,0 @@
-{
-    "Smileys & Emotion": [
-        {
-            "emoji": "😀",
-            "name": "grinning face"
-        },
-        {
-            "emoji": "😃",
-            "name": "grinning face with big eyes"
-        },
-        {
-            "emoji": "😄",
-            "name": "grinning face with smiling eyes"
-        },
-        {
-            "emoji": "😁",
-            "name": "beaming face with smiling eyes"
-        },
-        {
-            "emoji": "😆",
-            "name": "grinning squinting face"
-        },
-        {
-            "emoji": "😅",
-            "name": "grinning face with sweat"
-        },
-        {
-            "emoji": "🤣",
-            "name": "rolling on the floor laughing"
-        },
-        {
-            "emoji": "😂",
-            "name": "face with tears of joy"
-        },
-        {
-            "emoji": "🙂",
-            "name": "slightly smiling face"
-        },
-        {
-            "emoji": "🙃",
-            "name": "upside-down face"
-        },
-        {
-            "emoji": "🫠",
-            "name": "melting face"
-        },
-        {
-            "emoji": "😉",
-            "name": "winking face"
-        },
-        {
-            "emoji": "😊",
-            "name": "smiling face with smiling eyes"
-        },
-        {
-            "emoji": "😇",
-            "name": "smiling face with halo"
-        },
-        {
-            "emoji": "🥰",
-            "name": "smiling face with hearts"
-        },
-        {
-            "emoji": "😍",
-            "name": "smiling face with heart-eyes"
-        },
-        {
-            "emoji": "🤩",
-            "name": "star-struck"
-        },
-        {
-            "emoji": "😘",
-            "name": "face blowing a kiss"
-        },
-        {
-            "emoji": "😗",
-            "name": "kissing face"
-        },
-        {
-            "emoji": "☺️",
-            "name": "smiling face"
-        },
-        {
-            "emoji": "😚",
-            "name": "kissing face with closed eyes"
-        },
-        {
-            "emoji": "😙",
-            "name": "kissing face with smiling eyes"
-        },
-        {
-            "emoji": "🥲",
-            "name": "smiling face with tear"
-        },
-        {
-            "emoji": "😋",
-            "name": "face savoring food"
-        },
-        {
-            "emoji": "😛",
-            "name": "face with tongue"
-        },
-        {
-            "emoji": "😜",
-            "name": "winking face with tongue"
-        },
-        {
-            "emoji": "🤪",
-            "name": "zany face"
-        },
-        {
-            "emoji": "😝",
-            "name": "squinting face with tongue"
-        },
-        {
-            "emoji": "🤑",
-            "name": "money-mouth face"
-        },
-        {
-            "emoji": "🤗",
-            "name": "smiling face with open hands"
-        },
-        {
-            "emoji": "🤭",
-            "name": "face with hand over mouth"
-        },
-        {
-            "emoji": "🫢",
-            "name": "face with open eyes and hand over mouth"
-        },
-        {
-            "emoji": "🫣",
-            "name": "face with peeking eye"
-        },
-        {
-            "emoji": "🤫",
-            "name": "shushing face"
-        },
-        {
-            "emoji": "🤔",
-            "name": "thinking face"
-        },
-        {
-            "emoji": "🫡",
-            "name": "saluting face"
-        },
-        {
-            "emoji": "🤐",
-            "name": "zipper-mouth face"
-        },
-        {
-            "emoji": "🤨",
-            "name": "face with raised eyebrow"
-        },
-        {
-            "emoji": "😐",
-            "name": "neutral face"
-        },
-        {
-            "emoji": "😑",
-            "name": "expressionless face"
-        },
-        {
-            "emoji": "😶",
-            "name": "face without mouth"
-        },
-        {
-            "emoji": "🫥",
-            "name": "dotted line face"
-        },
-        {
-            "emoji": "😶‍🌫️",
-            "name": "face in clouds"
-        },
-        {
-            "emoji": "😏",
-            "name": "smirking face"
-        },
-        {
-            "emoji": "😒",
-            "name": "unamused face"
-        },
-        {
-            "emoji": "🙄",
-            "name": "face with rolling eyes"
-        },
-        {
-            "emoji": "😬",
-            "name": "grimacing face"
-        },
-        {
-            "emoji": "😮‍💨",
-            "name": "face exhaling"
-        },
-        {
-            "emoji": "🤥",
-            "name": "lying face"
-        },
-        {
-            "emoji": "🫨",
-            "name": "shaking face"
-        },
-        {
-            "emoji": "🙂‍↔️",
-            "name": "head shaking horizontally"
-        },
-        {
-            "emoji": "🙂‍↕️",
-            "name": "head shaking vertically"
-        },
-        {
-            "emoji": "😌",
-            "name": "relieved face"
-        },
-        {
-            "emoji": "😔",
-            "name": "pensive face"
-        },
-        {
-            "emoji": "😪",
-            "name": "sleepy face"
-        },
-        {
-            "emoji": "🤤",
-            "name": "drooling face"
-        },
-        {
-            "emoji": "😴",
-            "name": "sleeping face"
-        },
-        {
-            "emoji": "😷",
-            "name": "face with medical mask"
-        },
-        {
-            "emoji": "🤒",
-            "name": "face with thermometer"
-        },
-        {
-            "emoji": "🤕",
-            "name": "face with head-bandage"
-        },
-        {
-            "emoji": "🤢",
-            "name": "nauseated face"
-        },
-        {
-            "emoji": "🤮",
-            "name": "face vomiting"
-        },
-        {
-            "emoji": "🤧",
-            "name": "sneezing face"
-        },
-        {
-            "emoji": "🥵",
-            "name": "hot face"
-        },
-        {
-            "emoji": "🥶",
-            "name": "cold face"
-        },
-        {
-            "emoji": "🥴",
-            "name": "woozy face"
-        },
-        {
-            "emoji": "😵",
-            "name": "face with crossed-out eyes"
-        },
-        {
-            "emoji": "😵‍💫",
-            "name": "face with spiral eyes"
-        },
-        {
-            "emoji": "🤯",
-            "name": "exploding head"
-        },
-        {
-            "emoji": "🤠",
-            "name": "cowboy hat face"
-        },
-        {
-            "emoji": "🥳",
-            "name": "partying face"
-        },
-        {
-            "emoji": "🥸",
-            "name": "disguised face"
-        },
-        {
-            "emoji": "😎",
-            "name": "smiling face with sunglasses"
-        },
-        {
-            "emoji": "🤓",
-            "name": "nerd face"
-        },
-        {
-            "emoji": "🧐",
-            "name": "face with monocle"
-        },
-        {
-            "emoji": "😕",
-            "name": "confused face"
-        },
-        {
-            "emoji": "🫤",
-            "name": "face with diagonal mouth"
-        },
-        {
-            "emoji": "😟",
-            "name": "worried face"
-        },
-        {
-            "emoji": "🙁",
-            "name": "slightly frowning face"
-        },
-        {
-            "emoji": "☹️",
-            "name": "frowning face"
-        },
-        {
-            "emoji": "😮",
-            "name": "face with open mouth"
-        },
-        {
-            "emoji": "😯",
-            "name": "hushed face"
-        },
-        {
-            "emoji": "😲",
-            "name": "astonished face"
-        },
-        {
-            "emoji": "😳",
-            "name": "flushed face"
-        },
-        {
-            "emoji": "🥺",
-            "name": "pleading face"
-        },
-        {
-            "emoji": "🥹",
-            "name": "face holding back tears"
-        },
-        {
-            "emoji": "😦",
-            "name": "frowning face with open mouth"
-        },
-        {
-            "emoji": "😧",
-            "name": "anguished face"
-        },
-        {
-            "emoji": "😨",
-            "name": "fearful face"
-        },
-        {
-            "emoji": "😰",
-            "name": "anxious face with sweat"
-        },
-        {
-            "emoji": "😥",
-            "name": "sad but relieved face"
-        },
-        {
-            "emoji": "😢",
-            "name": "crying face"
-        },
-        {
-            "emoji": "😭",
-            "name": "loudly crying face"
-        },
-        {
-            "emoji": "😱",
-            "name": "face screaming in fear"
-        },
-        {
-            "emoji": "😖",
-            "name": "confounded face"
-        },
-        {
-            "emoji": "😣",
-            "name": "persevering face"
-        },
-        {
-            "emoji": "😞",
-            "name": "disappointed face"
-        },
-        {
-            "emoji": "😓",
-            "name": "downcast face with sweat"
-        },
-        {
-            "emoji": "😩",
-            "name": "weary face"
-        },
-        {
-            "emoji": "😫",
-            "name": "tired face"
-        },
-        {
-            "emoji": "🥱",
-            "name": "yawning face"
-        },
-        {
-            "emoji": "😤",
-            "name": "face with steam from nose"
-        },
-        {
-            "emoji": "😡",
-            "name": "enraged face"
-        },
-        {
-            "emoji": "😠",
-            "name": "angry face"
-        },
-        {
-            "emoji": "🤬",
-            "name": "face with symbols on mouth"
-        },
-        {
-            "emoji": "😈",
-            "name": "smiling face with horns"
-        },
-        {
-            "emoji": "👿",
-            "name": "angry face with horns"
-        },
-        {
-            "emoji": "💀",
-            "name": "skull"
-        },
-        {
-            "emoji": "☠️",
-            "name": "skull and crossbones"
-        },
-        {
-            "emoji": "💩",
-            "name": "pile of poo"
-        },
-        {
-            "emoji": "🤡",
-            "name": "clown face"
-        },
-        {
-            "emoji": "👹",
-            "name": "ogre"
-        },
-        {
-            "emoji": "👺",
-            "name": "goblin"
-        },
-        {
-            "emoji": "👻",
-            "name": "ghost"
-        },
-        {
-            "emoji": "👽",
-            "name": "alien"
-        },
-        {
-            "emoji": "👾",
-            "name": "alien monster"
-        },
-        {
-            "emoji": "🤖",
-            "name": "robot"
-        },
-        {
-            "emoji": "😺",
-            "name": "grinning cat"
-        },
-        {
-            "emoji": "😸",
-            "name": "grinning cat with smiling eyes"
-        },
-        {
-            "emoji": "😹",
-            "name": "cat with tears of joy"
-        },
-        {
-            "emoji": "😻",
-            "name": "smiling cat with heart-eyes"
-        },
-        {
-            "emoji": "😼",
-            "name": "cat with wry smile"
-        },
-        {
-            "emoji": "😽",
-            "name": "kissing cat"
-        },
-        {
-            "emoji": "🙀",
-            "name": "weary cat"
-        },
-        {
-            "emoji": "😿",
-            "name": "crying cat"
-        },
-        {
-            "emoji": "😾",
-            "name": "pouting cat"
-        },
-        {
-            "emoji": "🙈",
-            "name": "see-no-evil monkey"
-        },
-        {
-            "emoji": "🙉",
-            "name": "hear-no-evil monkey"
-        },
-        {
-            "emoji": "🙊",
-            "name": "speak-no-evil monkey"
-        },
-        {
-            "emoji": "💌",
-            "name": "love letter"
-        },
-        {
-            "emoji": "💘",
-            "name": "heart with arrow"
-        },
-        {
-            "emoji": "💝",
-            "name": "heart with ribbon"
-        },
-        {
-            "emoji": "💖",
-            "name": "sparkling heart"
-        },
-        {
-            "emoji": "💗",
-            "name": "growing heart"
-        },
-        {
-            "emoji": "💓",
-            "name": "beating heart"
-        },
-        {
-            "emoji": "💞",
-            "name": "revolving hearts"
-        },
-        {
-            "emoji": "💕",
-            "name": "two hearts"
-        },
-        {
-            "emoji": "💟",
-            "name": "heart decoration"
-        },
-        {
-            "emoji": "❣️",
-            "name": "heart exclamation"
-        },
-        {
-            "emoji": "💔",
-            "name": "broken heart"
-        },
-        {
-            "emoji": "❤️‍🔥",
-            "name": "heart on fire"
-        },
-        {
-            "emoji": "❤️‍🩹",
-            "name": "mending heart"
-        },
-        {
-            "emoji": "❤️",
-            "name": "red heart"
-        },
-        {
-            "emoji": "🩷",
-            "name": "pink heart"
-        },
-        {
-            "emoji": "🧡",
-            "name": "orange heart"
-        },
-        {
-            "emoji": "💛",
-            "name": "yellow heart"
-        },
-        {
-            "emoji": "💚",
-            "name": "green heart"
-        },
-        {
-            "emoji": "💙",
-            "name": "blue heart"
-        },
-        {
-            "emoji": "🩵",
-            "name": "light blue heart"
-        },
-        {
-            "emoji": "💜",
-            "name": "purple heart"
-        },
-        {
-            "emoji": "🤎",
-            "name": "brown heart"
-        },
-        {
-            "emoji": "🖤",
-            "name": "black heart"
-        },
-        {
-            "emoji": "🩶",
-            "name": "grey heart"
-        },
-        {
-            "emoji": "🤍",
-            "name": "white heart"
-        },
-        {
-            "emoji": "💋",
-            "name": "kiss mark"
-        },
-        {
-            "emoji": "💯",
-            "name": "hundred points"
-        },
-        {
-            "emoji": "💢",
-            "name": "anger symbol"
-        },
-        {
-            "emoji": "💥",
-            "name": "collision"
-        },
-        {
-            "emoji": "💫",
-            "name": "dizzy"
-        },
-        {
-            "emoji": "💦",
-            "name": "sweat droplets"
-        },
-        {
-            "emoji": "💨",
-            "name": "dashing away"
-        },
-        {
-            "emoji": "🕳️",
-            "name": "hole"
-        },
-        {
-            "emoji": "💬",
-            "name": "speech balloon"
-        },
-        {
-            "emoji": "👁️‍🗨️",
-            "name": "eye in speech bubble"
-        },
-        {
-            "emoji": "🗨️",
-            "name": "left speech bubble"
-        },
-        {
-            "emoji": "🗯️",
-            "name": "right anger bubble"
-        },
-        {
-            "emoji": "💭",
-            "name": "thought balloon"
-        },
-        {
-            "emoji": "💤",
-            "name": "ZZZ"
-        }
-    ],
-    "People & Body": [
-        {
-            "emoji": "👋",
-            "name": "waving hand"
-        },
-        {
-            "emoji": "🤚",
-            "name": "raised back of hand"
-        },
-        {
-            "emoji": "🖐️",
-            "name": "hand with fingers splayed"
-        },
-        {
-            "emoji": "✋",
-            "name": "raised hand"
-        },
-        {
-            "emoji": "🖖",
-            "name": "vulcan salute"
-        },
-        {
-            "emoji": "🫱",
-            "name": "rightwards hand"
-        },
-        {
-            "emoji": "🫲",
-            "name": "leftwards hand"
-        },
-        {
-            "emoji": "🫳",
-            "name": "palm down hand"
-        },
-        {
-            "emoji": "🫴",
-            "name": "palm up hand"
-        },
-        {
-            "emoji": "🫷",
-            "name": "leftwards pushing hand"
-        },
-        {
-            "emoji": "🫸",
-            "name": "rightwards pushing hand"
-        },
-        {
-            "emoji": "👌",
-            "name": "OK hand"
-        },
-        {
-            "emoji": "🤌",
-            "name": "pinched fingers"
-        },
-        {
-            "emoji": "🤏",
-            "name": "pinching hand"
-        },
-        {
-            "emoji": "✌️",
-            "name": "victory hand"
-        },
-        {
-            "emoji": "🤞",
-            "name": "crossed fingers"
-        },
-        {
-            "emoji": "🫰",
-            "name": "hand with index finger and thumb crossed"
-        },
-        {
-            "emoji": "🤟",
-            "name": "love-you gesture"
-        },
-        {
-            "emoji": "🤘",
-            "name": "sign of the horns"
-        },
-        {
-            "emoji": "🤙",
-            "name": "call me hand"
-        },
-        {
-            "emoji": "👈",
-            "name": "backhand index pointing left"
-        },
-        {
-            "emoji": "👉",
-            "name": "backhand index pointing right"
-        },
-        {
-            "emoji": "👆",
-            "name": "backhand index pointing up"
-        },
-        {
-            "emoji": "🖕",
-            "name": "middle finger"
-        },
-        {
-            "emoji": "👇",
-            "name": "backhand index pointing down"
-        },
-        {
-            "emoji": "☝️",
-            "name": "index pointing up"
-        },
-        {
-            "emoji": "🫵",
-            "name": "index pointing at the viewer"
-        },
-        {
-            "emoji": "👍",
-            "name": "thumbs up"
-        },
-        {
-            "emoji": "👎",
-            "name": "thumbs down"
-        },
-        {
-            "emoji": "✊",
-            "name": "raised fist"
-        },
-        {
-            "emoji": "👊",
-            "name": "oncoming fist"
-        },
-        {
-            "emoji": "🤛",
-            "name": "left-facing fist"
-        },
-        {
-            "emoji": "🤜",
-            "name": "right-facing fist"
-        },
-        {
-            "emoji": "👏",
-            "name": "clapping hands"
-        },
-        {
-            "emoji": "🙌",
-            "name": "raising hands"
-        },
-        {
-            "emoji": "🫶",
-            "name": "heart hands"
-        },
-        {
-            "emoji": "👐",
-            "name": "open hands"
-        },
-        {
-            "emoji": "🤲",
-            "name": "palms up together"
-        },
-        {
-            "emoji": "🤝",
-            "name": "handshake"
-        },
-        {
-            "emoji": "🙏",
-            "name": "folded hands"
-        },
-        {
-            "emoji": "✍️",
-            "name": "writing hand"
-        },
-        {
-            "emoji": "💅",
-            "name": "nail polish"
-        },
-        {
-            "emoji": "🤳",
-            "name": "selfie"
-        },
-        {
-            "emoji": "💪",
-            "name": "flexed biceps"
-        },
-        {
-            "emoji": "🦾",
-            "name": "mechanical arm"
-        },
-        {
-            "emoji": "🦿",
-            "name": "mechanical leg"
-        },
-        {
-            "emoji": "🦵",
-            "name": "leg"
-        },
-        {
-            "emoji": "🦶",
-            "name": "foot"
-        },
-        {
-            "emoji": "👂",
-            "name": "ear"
-        },
-        {
-            "emoji": "🦻",
-            "name": "ear with hearing aid"
-        },
-        {
-            "emoji": "👃",
-            "name": "nose"
-        },
-        {
-            "emoji": "🧠",
-            "name": "brain"
-        },
-        {
-            "emoji": "🫀",
-            "name": "anatomical heart"
-        },
-        {
-            "emoji": "🫁",
-            "name": "lungs"
-        },
-        {
-            "emoji": "🦷",
-            "name": "tooth"
-        },
-        {
-            "emoji": "🦴",
-            "name": "bone"
-        },
-        {
-            "emoji": "👀",
-            "name": "eyes"
-        },
-        {
-            "emoji": "👁️",
-            "name": "eye"
-        },
-        {
-            "emoji": "👅",
-            "name": "tongue"
-        },
-        {
-            "emoji": "👄",
-            "name": "mouth"
-        },
-        {
-            "emoji": "🫦",
-            "name": "biting lip"
-        },
-        {
-            "emoji": "👶",
-            "name": "baby"
-        },
-        {
-            "emoji": "🧒",
-            "name": "child"
-        },
-        {
-            "emoji": "👦",
-            "name": "boy"
-        },
-        {
-            "emoji": "👧",
-            "name": "girl"
-        },
-        {
-            "emoji": "🧑",
-            "name": "person"
-        },
-        {
-            "emoji": "👱",
-            "name": "person blond hair"
-        },
-        {
-            "emoji": "👨",
-            "name": "man"
-        },
-        {
-            "emoji": "🧔",
-            "name": "person beard"
-        },
-        {
-            "emoji": "🧔‍♂️",
-            "name": "man beard"
-        },
-        {
-            "emoji": "🧔‍♀️",
-            "name": "woman beard"
-        },
-        {
-            "emoji": "👨‍🦰",
-            "name": "man red hair"
-        },
-        {
-            "emoji": "👨‍🦱",
-            "name": "man curly hair"
-        },
-        {
-            "emoji": "👨‍🦳",
-            "name": "man white hair"
-        },
-        {
-            "emoji": "👨‍🦲",
-            "name": "man bald"
-        },
-        {
-            "emoji": "👩",
-            "name": "woman"
-        },
-        {
-            "emoji": "👩‍🦰",
-            "name": "woman red hair"
-        },
-        {
-            "emoji": "🧑‍🦰",
-            "name": "person red hair"
-        },
-        {
-            "emoji": "👩‍🦱",
-            "name": "woman curly hair"
-        },
-        {
-            "emoji": "🧑‍🦱",
-            "name": "person curly hair"
-        },
-        {
-            "emoji": "👩‍🦳",
-            "name": "woman white hair"
-        },
-        {
-            "emoji": "🧑‍🦳",
-            "name": "person white hair"
-        },
-        {
-            "emoji": "👩‍🦲",
-            "name": "woman bald"
-        },
-        {
-            "emoji": "🧑‍🦲",
-            "name": "person bald"
-        },
-        {
-            "emoji": "👱‍♀️",
-            "name": "woman blond hair"
-        },
-        {
-            "emoji": "👱‍♂️",
-            "name": "man blond hair"
-        },
-        {
-            "emoji": "🧓",
-            "name": "older person"
-        },
-        {
-            "emoji": "👴",
-            "name": "old man"
-        },
-        {
-            "emoji": "👵",
-            "name": "old woman"
-        },
-        {
-            "emoji": "🙍",
-            "name": "person frowning"
-        },
-        {
-            "emoji": "🙍‍♂️",
-            "name": "man frowning"
-        },
-        {
-            "emoji": "🙍‍♀️",
-            "name": "woman frowning"
-        },
-        {
-            "emoji": "🙎",
-            "name": "person pouting"
-        },
-        {
-            "emoji": "🙎‍♂️",
-            "name": "man pouting"
-        },
-        {
-            "emoji": "🙎‍♀️",
-            "name": "woman pouting"
-        },
-        {
-            "emoji": "🙅",
-            "name": "person gesturing NO"
-        },
-        {
-            "emoji": "🙅‍♂️",
-            "name": "man gesturing NO"
-        },
-        {
-            "emoji": "🙅‍♀️",
-            "name": "woman gesturing NO"
-        },
-        {
-            "emoji": "🙆",
-            "name": "person gesturing OK"
-        },
-        {
-            "emoji": "🙆‍♂️",
-            "name": "man gesturing OK"
-        },
-        {
-            "emoji": "🙆‍♀️",
-            "name": "woman gesturing OK"
-        },
-        {
-            "emoji": "💁",
-            "name": "person tipping hand"
-        },
-        {
-            "emoji": "💁‍♂️",
-            "name": "man tipping hand"
-        },
-        {
-            "emoji": "💁‍♀️",
-            "name": "woman tipping hand"
-        },
-        {
-            "emoji": "🙋",
-            "name": "person raising hand"
-        },
-        {
-            "emoji": "🙋‍♂️",
-            "name": "man raising hand"
-        },
-        {
-            "emoji": "🙋‍♀️",
-            "name": "woman raising hand"
-        },
-        {
-            "emoji": "🧏",
-            "name": "deaf person"
-        },
-        {
-            "emoji": "🧏‍♂️",
-            "name": "deaf man"
-        },
-        {
-            "emoji": "🧏‍♀️",
-            "name": "deaf woman"
-        },
-        {
-            "emoji": "🙇",
-            "name": "person bowing"
-        },
-        {
-            "emoji": "🙇‍♂️",
-            "name": "man bowing"
-        },
-        {
-            "emoji": "🙇‍♀️",
-            "name": "woman bowing"
-        },
-        {
-            "emoji": "🤦",
-            "name": "person facepalming"
-        },
-        {
-            "emoji": "🤦‍♂️",
-            "name": "man facepalming"
-        },
-        {
-            "emoji": "🤦‍♀️",
-            "name": "woman facepalming"
-        },
-        {
-            "emoji": "🤷",
-            "name": "person shrugging"
-        },
-        {
-            "emoji": "🤷‍♂️",
-            "name": "man shrugging"
-        },
-        {
-            "emoji": "🤷‍♀️",
-            "name": "woman shrugging"
-        },
-        {
-            "emoji": "🧑‍⚕️",
-            "name": "health worker"
-        },
-        {
-            "emoji": "👨‍⚕️",
-            "name": "man health worker"
-        },
-        {
-            "emoji": "👩‍⚕️",
-            "name": "woman health worker"
-        },
-        {
-            "emoji": "🧑‍🎓",
-            "name": "student"
-        },
-        {
-            "emoji": "👨‍🎓",
-            "name": "man student"
-        },
-        {
-            "emoji": "👩‍🎓",
-            "name": "woman student"
-        },
-        {
-            "emoji": "🧑‍🏫",
-            "name": "teacher"
-        },
-        {
-            "emoji": "👨‍🏫",
-            "name": "man teacher"
-        },
-        {
-            "emoji": "👩‍🏫",
-            "name": "woman teacher"
-        },
-        {
-            "emoji": "🧑‍⚖️",
-            "name": "judge"
-        },
-        {
-            "emoji": "👨‍⚖️",
-            "name": "man judge"
-        },
-        {
-            "emoji": "👩‍⚖️",
-            "name": "woman judge"
-        },
-        {
-            "emoji": "🧑‍🌾",
-            "name": "farmer"
-        },
-        {
-            "emoji": "👨‍🌾",
-            "name": "man farmer"
-        },
-        {
-            "emoji": "👩‍🌾",
-            "name": "woman farmer"
-        },
-        {
-            "emoji": "🧑‍🍳",
-            "name": "cook"
-        },
-        {
-            "emoji": "👨‍🍳",
-            "name": "man cook"
-        },
-        {
-            "emoji": "👩‍🍳",
-            "name": "woman cook"
-        },
-        {
-            "emoji": "🧑‍🔧",
-            "name": "mechanic"
-        },
-        {
-            "emoji": "👨‍🔧",
-            "name": "man mechanic"
-        },
-        {
-            "emoji": "👩‍🔧",
-            "name": "woman mechanic"
-        },
-        {
-            "emoji": "🧑‍🏭",
-            "name": "factory worker"
-        },
-        {
-            "emoji": "👨‍🏭",
-            "name": "man factory worker"
-        },
-        {
-            "emoji": "👩‍🏭",
-            "name": "woman factory worker"
-        },
-        {
-            "emoji": "🧑‍💼",
-            "name": "office worker"
-        },
-        {
-            "emoji": "👨‍💼",
-            "name": "man office worker"
-        },
-        {
-            "emoji": "👩‍💼",
-            "name": "woman office worker"
-        },
-        {
-            "emoji": "🧑‍🔬",
-            "name": "scientist"
-        },
-        {
-            "emoji": "👨‍🔬",
-            "name": "man scientist"
-        },
-        {
-            "emoji": "👩‍🔬",
-            "name": "woman scientist"
-        },
-        {
-            "emoji": "🧑‍💻",
-            "name": "technologist"
-        },
-        {
-            "emoji": "👨‍💻",
-            "name": "man technologist"
-        },
-        {
-            "emoji": "👩‍💻",
-            "name": "woman technologist"
-        },
-        {
-            "emoji": "🧑‍🎤",
-            "name": "singer"
-        },
-        {
-            "emoji": "👨‍🎤",
-            "name": "man singer"
-        },
-        {
-            "emoji": "👩‍🎤",
-            "name": "woman singer"
-        },
-        {
-            "emoji": "🧑‍🎨",
-            "name": "artist"
-        },
-        {
-            "emoji": "👨‍🎨",
-            "name": "man artist"
-        },
-        {
-            "emoji": "👩‍🎨",
-            "name": "woman artist"
-        },
-        {
-            "emoji": "🧑‍✈️",
-            "name": "pilot"
-        },
-        {
-            "emoji": "👨‍✈️",
-            "name": "man pilot"
-        },
-        {
-            "emoji": "👩‍✈️",
-            "name": "woman pilot"
-        },
-        {
-            "emoji": "🧑‍🚀",
-            "name": "astronaut"
-        },
-        {
-            "emoji": "👨‍🚀",
-            "name": "man astronaut"
-        },
-        {
-            "emoji": "👩‍🚀",
-            "name": "woman astronaut"
-        },
-        {
-            "emoji": "🧑‍🚒",
-            "name": "firefighter"
-        },
-        {
-            "emoji": "👨‍🚒",
-            "name": "man firefighter"
-        },
-        {
-            "emoji": "👩‍🚒",
-            "name": "woman firefighter"
-        },
-        {
-            "emoji": "👮",
-            "name": "police officer"
-        },
-        {
-            "emoji": "👮‍♂️",
-            "name": "man police officer"
-        },
-        {
-            "emoji": "👮‍♀️",
-            "name": "woman police officer"
-        },
-        {
-            "emoji": "🕵️",
-            "name": "detective"
-        },
-        {
-            "emoji": "🕵️‍♂️",
-            "name": "man detective"
-        },
-        {
-            "emoji": "🕵️‍♀️",
-            "name": "woman detective"
-        },
-        {
-            "emoji": "💂",
-            "name": "guard"
-        },
-        {
-            "emoji": "💂‍♂️",
-            "name": "man guard"
-        },
-        {
-            "emoji": "💂‍♀️",
-            "name": "woman guard"
-        },
-        {
-            "emoji": "🥷",
-            "name": "ninja"
-        },
-        {
-            "emoji": "👷",
-            "name": "construction worker"
-        },
-        {
-            "emoji": "👷‍♂️",
-            "name": "man construction worker"
-        },
-        {
-            "emoji": "👷‍♀️",
-            "name": "woman construction worker"
-        },
-        {
-            "emoji": "🫅",
-            "name": "person with crown"
-        },
-        {
-            "emoji": "🤴",
-            "name": "prince"
-        },
-        {
-            "emoji": "👸",
-            "name": "princess"
-        },
-        {
-            "emoji": "👳",
-            "name": "person wearing turban"
-        },
-        {
-            "emoji": "👳‍♂️",
-            "name": "man wearing turban"
-        },
-        {
-            "emoji": "👳‍♀️",
-            "name": "woman wearing turban"
-        },
-        {
-            "emoji": "👲",
-            "name": "person with skullcap"
-        },
-        {
-            "emoji": "🧕",
-            "name": "woman with headscarf"
-        },
-        {
-            "emoji": "🤵",
-            "name": "person in tuxedo"
-        },
-        {
-            "emoji": "🤵‍♂️",
-            "name": "man in tuxedo"
-        },
-        {
-            "emoji": "🤵‍♀️",
-            "name": "woman in tuxedo"
-        },
-        {
-            "emoji": "👰",
-            "name": "person with veil"
-        },
-        {
-            "emoji": "👰‍♂️",
-            "name": "man with veil"
-        },
-        {
-            "emoji": "👰‍♀️",
-            "name": "woman with veil"
-        },
-        {
-            "emoji": "🤰",
-            "name": "pregnant woman"
-        },
-        {
-            "emoji": "🫃",
-            "name": "pregnant man"
-        },
-        {
-            "emoji": "🫄",
-            "name": "pregnant person"
-        },
-        {
-            "emoji": "🤱",
-            "name": "breast-feeding"
-        },
-        {
-            "emoji": "👩‍🍼",
-            "name": "woman feeding baby"
-        },
-        {
-            "emoji": "👨‍🍼",
-            "name": "man feeding baby"
-        },
-        {
-            "emoji": "🧑‍🍼",
-            "name": "person feeding baby"
-        },
-        {
-            "emoji": "👼",
-            "name": "baby angel"
-        },
-        {
-            "emoji": "🎅",
-            "name": "Santa Claus"
-        },
-        {
-            "emoji": "🤶",
-            "name": "Mrs. Claus"
-        },
-        {
-            "emoji": "🧑‍🎄",
-            "name": "mx claus"
-        },
-        {
-            "emoji": "🦸",
-            "name": "superhero"
-        },
-        {
-            "emoji": "🦸‍♂️",
-            "name": "man superhero"
-        },
-        {
-            "emoji": "🦸‍♀️",
-            "name": "woman superhero"
-        },
-        {
-            "emoji": "🦹",
-            "name": "supervillain"
-        },
-        {
-            "emoji": "🦹‍♂️",
-            "name": "man supervillain"
-        },
-        {
-            "emoji": "🦹‍♀️",
-            "name": "woman supervillain"
-        },
-        {
-            "emoji": "🧙",
-            "name": "mage"
-        },
-        {
-            "emoji": "🧙‍♂️",
-            "name": "man mage"
-        },
-        {
-            "emoji": "🧙‍♀️",
-            "name": "woman mage"
-        },
-        {
-            "emoji": "🧚",
-            "name": "fairy"
-        },
-        {
-            "emoji": "🧚‍♂️",
-            "name": "man fairy"
-        },
-        {
-            "emoji": "🧚‍♀️",
-            "name": "woman fairy"
-        },
-        {
-            "emoji": "🧛",
-            "name": "vampire"
-        },
-        {
-            "emoji": "🧛‍♂️",
-            "name": "man vampire"
-        },
-        {
-            "emoji": "🧛‍♀️",
-            "name": "woman vampire"
-        },
-        {
-            "emoji": "🧜",
-            "name": "merperson"
-        },
-        {
-            "emoji": "🧜‍♂️",
-            "name": "merman"
-        },
-        {
-            "emoji": "🧜‍♀️",
-            "name": "mermaid"
-        },
-        {
-            "emoji": "🧝",
-            "name": "elf"
-        },
-        {
-            "emoji": "🧝‍♂️",
-            "name": "man elf"
-        },
-        {
-            "emoji": "🧝‍♀️",
-            "name": "woman elf"
-        },
-        {
-            "emoji": "🧞",
-            "name": "genie"
-        },
-        {
-            "emoji": "🧞‍♂️",
-            "name": "man genie"
-        },
-        {
-            "emoji": "🧞‍♀️",
-            "name": "woman genie"
-        },
-        {
-            "emoji": "🧟",
-            "name": "zombie"
-        },
-        {
-            "emoji": "🧟‍♂️",
-            "name": "man zombie"
-        },
-        {
-            "emoji": "🧟‍♀️",
-            "name": "woman zombie"
-        },
-        {
-            "emoji": "🧌",
-            "name": "troll"
-        },
-        {
-            "emoji": "💆",
-            "name": "person getting massage"
-        },
-        {
-            "emoji": "💆‍♂️",
-            "name": "man getting massage"
-        },
-        {
-            "emoji": "💆‍♀️",
-            "name": "woman getting massage"
-        },
-        {
-            "emoji": "💇",
-            "name": "person getting haircut"
-        },
-        {
-            "emoji": "💇‍♂️",
-            "name": "man getting haircut"
-        },
-        {
-            "emoji": "💇‍♀️",
-            "name": "woman getting haircut"
-        },
-        {
-            "emoji": "🚶",
-            "name": "person walking"
-        },
-        {
-            "emoji": "🚶‍♂️",
-            "name": "man walking"
-        },
-        {
-            "emoji": "🚶‍♀️",
-            "name": "woman walking"
-        },
-        {
-            "emoji": "🚶‍➡️",
-            "name": "person walking facing right"
-        },
-        {
-            "emoji": "🚶‍♀️‍➡️",
-            "name": "woman walking facing right"
-        },
-        {
-            "emoji": "🚶‍♂️‍➡️",
-            "name": "man walking facing right"
-        },
-        {
-            "emoji": "🧍",
-            "name": "person standing"
-        },
-        {
-            "emoji": "🧍‍♂️",
-            "name": "man standing"
-        },
-        {
-            "emoji": "🧍‍♀️",
-            "name": "woman standing"
-        },
-        {
-            "emoji": "🧎",
-            "name": "person kneeling"
-        },
-        {
-            "emoji": "🧎‍♂️",
-            "name": "man kneeling"
-        },
-        {
-            "emoji": "🧎‍♀️",
-            "name": "woman kneeling"
-        },
-        {
-            "emoji": "🧎‍➡️",
-            "name": "person kneeling facing right"
-        },
-        {
-            "emoji": "🧎‍♀️‍➡️",
-            "name": "woman kneeling facing right"
-        },
-        {
-            "emoji": "🧎‍♂️‍➡️",
-            "name": "man kneeling facing right"
-        },
-        {
-            "emoji": "🧑‍🦯",
-            "name": "person with white cane"
-        },
-        {
-            "emoji": "🧑‍🦯‍➡️",
-            "name": "person with white cane facing right"
-        },
-        {
-            "emoji": "👨‍🦯",
-            "name": "man with white cane"
-        },
-        {
-            "emoji": "👨‍🦯‍➡️",
-            "name": "man with white cane facing right"
-        },
-        {
-            "emoji": "👩‍🦯",
-            "name": "woman with white cane"
-        },
-        {
-            "emoji": "👩‍🦯‍➡️",
-            "name": "woman with white cane facing right"
-        },
-        {
-            "emoji": "🧑‍🦼",
-            "name": "person in motorized wheelchair"
-        },
-        {
-            "emoji": "🧑‍🦼‍➡️",
-            "name": "person in motorized wheelchair facing right"
-        },
-        {
-            "emoji": "👨‍🦼",
-            "name": "man in motorized wheelchair"
-        },
-        {
-            "emoji": "👨‍🦼‍➡️",
-            "name": "man in motorized wheelchair facing right"
-        },
-        {
-            "emoji": "👩‍🦼",
-            "name": "woman in motorized wheelchair"
-        },
-        {
-            "emoji": "👩‍🦼‍➡️",
-            "name": "woman in motorized wheelchair facing right"
-        },
-        {
-            "emoji": "🧑‍🦽",
-            "name": "person in manual wheelchair"
-        },
-        {
-            "emoji": "🧑‍🦽‍➡️",
-            "name": "person in manual wheelchair facing right"
-        },
-        {
-            "emoji": "👨‍🦽",
-            "name": "man in manual wheelchair"
-        },
-        {
-            "emoji": "👨‍🦽‍➡️",
-            "name": "man in manual wheelchair facing right"
-        },
-        {
-            "emoji": "👩‍🦽",
-            "name": "woman in manual wheelchair"
-        },
-        {
-            "emoji": "👩‍🦽‍➡️",
-            "name": "woman in manual wheelchair facing right"
-        },
-        {
-            "emoji": "🏃",
-            "name": "person running"
-        },
-        {
-            "emoji": "🏃‍♂️",
-            "name": "man running"
-        },
-        {
-            "emoji": "🏃‍♀️",
-            "name": "woman running"
-        },
-        {
-            "emoji": "🏃‍➡️",
-            "name": "person running facing right"
-        },
-        {
-            "emoji": "🏃‍♀️‍➡️",
-            "name": "woman running facing right"
-        },
-        {
-            "emoji": "🏃‍♂️‍➡️",
-            "name": "man running facing right"
-        },
-        {
-            "emoji": "💃",
-            "name": "woman dancing"
-        },
-        {
-            "emoji": "🕺",
-            "name": "man dancing"
-        },
-        {
-            "emoji": "🕴️",
-            "name": "person in suit levitating"
-        },
-        {
-            "emoji": "👯",
-            "name": "people with bunny ears"
-        },
-        {
-            "emoji": "👯‍♂️",
-            "name": "men with bunny ears"
-        },
-        {
-            "emoji": "👯‍♀️",
-            "name": "women with bunny ears"
-        },
-        {
-            "emoji": "🧖",
-            "name": "person in steamy room"
-        },
-        {
-            "emoji": "🧖‍♂️",
-            "name": "man in steamy room"
-        },
-        {
-            "emoji": "🧖‍♀️",
-            "name": "woman in steamy room"
-        },
-        {
-            "emoji": "🧗",
-            "name": "person climbing"
-        },
-        {
-            "emoji": "🧗‍♂️",
-            "name": "man climbing"
-        },
-        {
-            "emoji": "🧗‍♀️",
-            "name": "woman climbing"
-        },
-        {
-            "emoji": "🤺",
-            "name": "person fencing"
-        },
-        {
-            "emoji": "🏇",
-            "name": "horse racing"
-        },
-        {
-            "emoji": "⛷️",
-            "name": "skier"
-        },
-        {
-            "emoji": "🏂",
-            "name": "snowboarder"
-        },
-        {
-            "emoji": "🏌️",
-            "name": "person golfing"
-        },
-        {
-            "emoji": "🏌️‍♂️",
-            "name": "man golfing"
-        },
-        {
-            "emoji": "🏌️‍♀️",
-            "name": "woman golfing"
-        },
-        {
-            "emoji": "🏄",
-            "name": "person surfing"
-        },
-        {
-            "emoji": "🏄‍♂️",
-            "name": "man surfing"
-        },
-        {
-            "emoji": "🏄‍♀️",
-            "name": "woman surfing"
-        },
-        {
-            "emoji": "🚣",
-            "name": "person rowing boat"
-        },
-        {
-            "emoji": "🚣‍♂️",
-            "name": "man rowing boat"
-        },
-        {
-            "emoji": "🚣‍♀️",
-            "name": "woman rowing boat"
-        },
-        {
-            "emoji": "🏊",
-            "name": "person swimming"
-        },
-        {
-            "emoji": "🏊‍♂️",
-            "name": "man swimming"
-        },
-        {
-            "emoji": "🏊‍♀️",
-            "name": "woman swimming"
-        },
-        {
-            "emoji": "⛹️",
-            "name": "person bouncing ball"
-        },
-        {
-            "emoji": "⛹️‍♂️",
-            "name": "man bouncing ball"
-        },
-        {
-            "emoji": "⛹️‍♀️",
-            "name": "woman bouncing ball"
-        },
-        {
-            "emoji": "🏋️",
-            "name": "person lifting weights"
-        },
-        {
-            "emoji": "🏋️‍♂️",
-            "name": "man lifting weights"
-        },
-        {
-            "emoji": "🏋️‍♀️",
-            "name": "woman lifting weights"
-        },
-        {
-            "emoji": "🚴",
-            "name": "person biking"
-        },
-        {
-            "emoji": "🚴‍♂️",
-            "name": "man biking"
-        },
-        {
-            "emoji": "🚴‍♀️",
-            "name": "woman biking"
-        },
-        {
-            "emoji": "🚵",
-            "name": "person mountain biking"
-        },
-        {
-            "emoji": "🚵‍♂️",
-            "name": "man mountain biking"
-        },
-        {
-            "emoji": "🚵‍♀️",
-            "name": "woman mountain biking"
-        },
-        {
-            "emoji": "🤸",
-            "name": "person cartwheeling"
-        },
-        {
-            "emoji": "🤸‍♂️",
-            "name": "man cartwheeling"
-        },
-        {
-            "emoji": "🤸‍♀️",
-            "name": "woman cartwheeling"
-        },
-        {
-            "emoji": "🤼",
-            "name": "people wrestling"
-        },
-        {
-            "emoji": "🤼‍♂️",
-            "name": "men wrestling"
-        },
-        {
-            "emoji": "🤼‍♀️",
-            "name": "women wrestling"
-        },
-        {
-            "emoji": "🤽",
-            "name": "person playing water polo"
-        },
-        {
-            "emoji": "🤽‍♂️",
-            "name": "man playing water polo"
-        },
-        {
-            "emoji": "🤽‍♀️",
-            "name": "woman playing water polo"
-        },
-        {
-            "emoji": "🤾",
-            "name": "person playing handball"
-        },
-        {
-            "emoji": "🤾‍♂️",
-            "name": "man playing handball"
-        },
-        {
-            "emoji": "🤾‍♀️",
-            "name": "woman playing handball"
-        },
-        {
-            "emoji": "🤹",
-            "name": "person juggling"
-        },
-        {
-            "emoji": "🤹‍♂️",
-            "name": "man juggling"
-        },
-        {
-            "emoji": "🤹‍♀️",
-            "name": "woman juggling"
-        },
-        {
-            "emoji": "🧘",
-            "name": "person in lotus position"
-        },
-        {
-            "emoji": "🧘‍♂️",
-            "name": "man in lotus position"
-        },
-        {
-            "emoji": "🧘‍♀️",
-            "name": "woman in lotus position"
-        },
-        {
-            "emoji": "🛀",
-            "name": "person taking bath"
-        },
-        {
-            "emoji": "🛌",
-            "name": "person in bed"
-        },
-        {
-            "emoji": "🧑‍🤝‍🧑",
-            "name": "people holding hands"
-        },
-        {
-            "emoji": "👭",
-            "name": "women holding hands"
-        },
-        {
-            "emoji": "👫",
-            "name": "woman and man holding hands"
-        },
-        {
-            "emoji": "👬",
-            "name": "men holding hands"
-        },
-        {
-            "emoji": "💏",
-            "name": "kiss"
-        },
-        {
-            "emoji": "👩‍❤️‍💋‍👨",
-            "name": "kiss woman, man"
-        },
-        {
-            "emoji": "👨‍❤️‍💋‍👨",
-            "name": "kiss man, man"
-        },
-        {
-            "emoji": "👩‍❤️‍💋‍👩",
-            "name": "kiss woman, woman"
-        },
-        {
-            "emoji": "💑",
-            "name": "couple with heart"
-        },
-        {
-            "emoji": "👩‍❤️‍👨",
-            "name": "couple with heart woman, man"
-        },
-        {
-            "emoji": "👨‍❤️‍👨",
-            "name": "couple with heart man, man"
-        },
-        {
-            "emoji": "👩‍❤️‍👩",
-            "name": "couple with heart woman, woman"
-        },
-        {
-            "emoji": "👨‍👩‍👦",
-            "name": "family man, woman, boy"
-        },
-        {
-            "emoji": "👨‍👩‍👧",
-            "name": "family man, woman, girl"
-        },
-        {
-            "emoji": "👨‍👩‍👧‍👦",
-            "name": "family man, woman, girl, boy"
-        },
-        {
-            "emoji": "👨‍👩‍👦‍👦",
-            "name": "family man, woman, boy, boy"
-        },
-        {
-            "emoji": "👨‍👩‍👧‍👧",
-            "name": "family man, woman, girl, girl"
-        },
-        {
-            "emoji": "👨‍👨‍👦",
-            "name": "family man, man, boy"
-        },
-        {
-            "emoji": "👨‍👨‍👧",
-            "name": "family man, man, girl"
-        },
-        {
-            "emoji": "👨‍👨‍👧‍👦",
-            "name": "family man, man, girl, boy"
-        },
-        {
-            "emoji": "👨‍👨‍👦‍👦",
-            "name": "family man, man, boy, boy"
-        },
-        {
-            "emoji": "👨‍👨‍👧‍👧",
-            "name": "family man, man, girl, girl"
-        },
-        {
-            "emoji": "👩‍👩‍👦",
-            "name": "family woman, woman, boy"
-        },
-        {
-            "emoji": "👩‍👩‍👧",
-            "name": "family woman, woman, girl"
-        },
-        {
-            "emoji": "👩‍👩‍👧‍👦",
-            "name": "family woman, woman, girl, boy"
-        },
-        {
-            "emoji": "👩‍👩‍👦‍👦",
-            "name": "family woman, woman, boy, boy"
-        },
-        {
-            "emoji": "👩‍👩‍👧‍👧",
-            "name": "family woman, woman, girl, girl"
-        },
-        {
-            "emoji": "👨‍👦",
-            "name": "family man, boy"
-        },
-        {
-            "emoji": "👨‍👦‍👦",
-            "name": "family man, boy, boy"
-        },
-        {
-            "emoji": "👨‍👧",
-            "name": "family man, girl"
-        },
-        {
-            "emoji": "👨‍👧‍👦",
-            "name": "family man, girl, boy"
-        },
-        {
-            "emoji": "👨‍👧‍👧",
-            "name": "family man, girl, girl"
-        },
-        {
-            "emoji": "👩‍👦",
-            "name": "family woman, boy"
-        },
-        {
-            "emoji": "👩‍👦‍👦",
-            "name": "family woman, boy, boy"
-        },
-        {
-            "emoji": "👩‍👧",
-            "name": "family woman, girl"
-        },
-        {
-            "emoji": "👩‍👧‍👦",
-            "name": "family woman, girl, boy"
-        },
-        {
-            "emoji": "👩‍👧‍👧",
-            "name": "family woman, girl, girl"
-        },
-        {
-            "emoji": "🗣️",
-            "name": "speaking head"
-        },
-        {
-            "emoji": "👤",
-            "name": "bust in silhouette"
-        },
-        {
-            "emoji": "👥",
-            "name": "busts in silhouette"
-        },
-        {
-            "emoji": "🫂",
-            "name": "people hugging"
-        },
-        {
-            "emoji": "👪",
-            "name": "family"
-        },
-        {
-            "emoji": "🧑‍🧑‍🧒",
-            "name": "family adult, adult, child"
-        },
-        {
-            "emoji": "🧑‍🧑‍🧒‍🧒",
-            "name": "family adult, adult, child, child"
-        },
-        {
-            "emoji": "🧑‍🧒",
-            "name": "family adult, child"
-        },
-        {
-            "emoji": "🧑‍🧒‍🧒",
-            "name": "family adult, child, child"
-        },
-        {
-            "emoji": "👣",
-            "name": "footprints"
-        }
-    ],
-    "Animals & Nature": [
-        {
-            "emoji": "🐵",
-            "name": "monkey face"
-        },
-        {
-            "emoji": "🐒",
-            "name": "monkey"
-        },
-        {
-            "emoji": "🦍",
-            "name": "gorilla"
-        },
-        {
-            "emoji": "🦧",
-            "name": "orangutan"
-        },
-        {
-            "emoji": "🐶",
-            "name": "dog face"
-        },
-        {
-            "emoji": "🐕",
-            "name": "dog"
-        },
-        {
-            "emoji": "🦮",
-            "name": "guide dog"
-        },
-        {
-            "emoji": "🐕‍🦺",
-            "name": "service dog"
-        },
-        {
-            "emoji": "🐩",
-            "name": "poodle"
-        },
-        {
-            "emoji": "🐺",
-            "name": "wolf"
-        },
-        {
-            "emoji": "🦊",
-            "name": "fox"
-        },
-        {
-            "emoji": "🦝",
-            "name": "raccoon"
-        },
-        {
-            "emoji": "🐱",
-            "name": "cat face"
-        },
-        {
-            "emoji": "🐈",
-            "name": "cat"
-        },
-        {
-            "emoji": "🐈‍⬛",
-            "name": "black cat"
-        },
-        {
-            "emoji": "🦁",
-            "name": "lion"
-        },
-        {
-            "emoji": "🐯",
-            "name": "tiger face"
-        },
-        {
-            "emoji": "🐅",
-            "name": "tiger"
-        },
-        {
-            "emoji": "🐆",
-            "name": "leopard"
-        },
-        {
-            "emoji": "🐴",
-            "name": "horse face"
-        },
-        {
-            "emoji": "🫎",
-            "name": "moose"
-        },
-        {
-            "emoji": "🫏",
-            "name": "donkey"
-        },
-        {
-            "emoji": "🐎",
-            "name": "horse"
-        },
-        {
-            "emoji": "🦄",
-            "name": "unicorn"
-        },
-        {
-            "emoji": "🦓",
-            "name": "zebra"
-        },
-        {
-            "emoji": "🦌",
-            "name": "deer"
-        },
-        {
-            "emoji": "🦬",
-            "name": "bison"
-        },
-        {
-            "emoji": "🐮",
-            "name": "cow face"
-        },
-        {
-            "emoji": "🐂",
-            "name": "ox"
-        },
-        {
-            "emoji": "🐃",
-            "name": "water buffalo"
-        },
-        {
-            "emoji": "🐄",
-            "name": "cow"
-        },
-        {
-            "emoji": "🐷",
-            "name": "pig face"
-        },
-        {
-            "emoji": "🐖",
-            "name": "pig"
-        },
-        {
-            "emoji": "🐗",
-            "name": "boar"
-        },
-        {
-            "emoji": "🐽",
-            "name": "pig nose"
-        },
-        {
-            "emoji": "🐏",
-            "name": "ram"
-        },
-        {
-            "emoji": "🐑",
-            "name": "ewe"
-        },
-        {
-            "emoji": "🐐",
-            "name": "goat"
-        },
-        {
-            "emoji": "🐪",
-            "name": "camel"
-        },
-        {
-            "emoji": "🐫",
-            "name": "two-hump camel"
-        },
-        {
-            "emoji": "🦙",
-            "name": "llama"
-        },
-        {
-            "emoji": "🦒",
-            "name": "giraffe"
-        },
-        {
-            "emoji": "🐘",
-            "name": "elephant"
-        },
-        {
-            "emoji": "🦣",
-            "name": "mammoth"
-        },
-        {
-            "emoji": "🦏",
-            "name": "rhinoceros"
-        },
-        {
-            "emoji": "🦛",
-            "name": "hippopotamus"
-        },
-        {
-            "emoji": "🐭",
-            "name": "mouse face"
-        },
-        {
-            "emoji": "🐁",
-            "name": "mouse"
-        },
-        {
-            "emoji": "🐀",
-            "name": "rat"
-        },
-        {
-            "emoji": "🐹",
-            "name": "hamster"
-        },
-        {
-            "emoji": "🐰",
-            "name": "rabbit face"
-        },
-        {
-            "emoji": "🐇",
-            "name": "rabbit"
-        },
-        {
-            "emoji": "🐿️",
-            "name": "chipmunk"
-        },
-        {
-            "emoji": "🦫",
-            "name": "beaver"
-        },
-        {
-            "emoji": "🦔",
-            "name": "hedgehog"
-        },
-        {
-            "emoji": "🦇",
-            "name": "bat"
-        },
-        {
-            "emoji": "🐻",
-            "name": "bear"
-        },
-        {
-            "emoji": "🐻‍❄️",
-            "name": "polar bear"
-        },
-        {
-            "emoji": "🐨",
-            "name": "koala"
-        },
-        {
-            "emoji": "🐼",
-            "name": "panda"
-        },
-        {
-            "emoji": "🦥",
-            "name": "sloth"
-        },
-        {
-            "emoji": "🦦",
-            "name": "otter"
-        },
-        {
-            "emoji": "🦨",
-            "name": "skunk"
-        },
-        {
-            "emoji": "🦘",
-            "name": "kangaroo"
-        },
-        {
-            "emoji": "🦡",
-            "name": "badger"
-        },
-        {
-            "emoji": "🐾",
-            "name": "paw prints"
-        },
-        {
-            "emoji": "🦃",
-            "name": "turkey"
-        },
-        {
-            "emoji": "🐔",
-            "name": "chicken"
-        },
-        {
-            "emoji": "🐓",
-            "name": "rooster"
-        },
-        {
-            "emoji": "🐣",
-            "name": "hatching chick"
-        },
-        {
-            "emoji": "🐤",
-            "name": "baby chick"
-        },
-        {
-            "emoji": "🐥",
-            "name": "front-facing baby chick"
-        },
-        {
-            "emoji": "🐦",
-            "name": "bird"
-        },
-        {
-            "emoji": "🐧",
-            "name": "penguin"
-        },
-        {
-            "emoji": "🕊️",
-            "name": "dove"
-        },
-        {
-            "emoji": "🦅",
-            "name": "eagle"
-        },
-        {
-            "emoji": "🦆",
-            "name": "duck"
-        },
-        {
-            "emoji": "🦢",
-            "name": "swan"
-        },
-        {
-            "emoji": "🦉",
-            "name": "owl"
-        },
-        {
-            "emoji": "🦤",
-            "name": "dodo"
-        },
-        {
-            "emoji": "🪶",
-            "name": "feather"
-        },
-        {
-            "emoji": "🦩",
-            "name": "flamingo"
-        },
-        {
-            "emoji": "🦚",
-            "name": "peacock"
-        },
-        {
-            "emoji": "🦜",
-            "name": "parrot"
-        },
-        {
-            "emoji": "🪽",
-            "name": "wing"
-        },
-        {
-            "emoji": "🐦‍⬛",
-            "name": "black bird"
-        },
-        {
-            "emoji": "🪿",
-            "name": "goose"
-        },
-        {
-            "emoji": "🐦‍🔥",
-            "name": "phoenix"
-        },
-        {
-            "emoji": "🐸",
-            "name": "frog"
-        },
-        {
-            "emoji": "🐊",
-            "name": "crocodile"
-        },
-        {
-            "emoji": "🐢",
-            "name": "turtle"
-        },
-        {
-            "emoji": "🦎",
-            "name": "lizard"
-        },
-        {
-            "emoji": "🐍",
-            "name": "snake"
-        },
-        {
-            "emoji": "🐲",
-            "name": "dragon face"
-        },
-        {
-            "emoji": "🐉",
-            "name": "dragon"
-        },
-        {
-            "emoji": "🦕",
-            "name": "sauropod"
-        },
-        {
-            "emoji": "🦖",
-            "name": "T-Rex"
-        },
-        {
-            "emoji": "🐳",
-            "name": "spouting whale"
-        },
-        {
-            "emoji": "🐋",
-            "name": "whale"
-        },
-        {
-            "emoji": "🐬",
-            "name": "dolphin"
-        },
-        {
-            "emoji": "🦭",
-            "name": "seal"
-        },
-        {
-            "emoji": "🐟",
-            "name": "fish"
-        },
-        {
-            "emoji": "🐠",
-            "name": "tropical fish"
-        },
-        {
-            "emoji": "🐡",
-            "name": "blowfish"
-        },
-        {
-            "emoji": "🦈",
-            "name": "shark"
-        },
-        {
-            "emoji": "🐙",
-            "name": "octopus"
-        },
-        {
-            "emoji": "🐚",
-            "name": "spiral shell"
-        },
-        {
-            "emoji": "🪸",
-            "name": "coral"
-        },
-        {
-            "emoji": "🪼",
-            "name": "jellyfish"
-        },
-        {
-            "emoji": "🐌",
-            "name": "snail"
-        },
-        {
-            "emoji": "🦋",
-            "name": "butterfly"
-        },
-        {
-            "emoji": "🐛",
-            "name": "bug"
-        },
-        {
-            "emoji": "🐜",
-            "name": "ant"
-        },
-        {
-            "emoji": "🐝",
-            "name": "honeybee"
-        },
-        {
-            "emoji": "🪲",
-            "name": "beetle"
-        },
-        {
-            "emoji": "🐞",
-            "name": "lady beetle"
-        },
-        {
-            "emoji": "🦗",
-            "name": "cricket"
-        },
-        {
-            "emoji": "🪳",
-            "name": "cockroach"
-        },
-        {
-            "emoji": "🕷️",
-            "name": "spider"
-        },
-        {
-            "emoji": "🕸️",
-            "name": "spider web"
-        },
-        {
-            "emoji": "🦂",
-            "name": "scorpion"
-        },
-        {
-            "emoji": "🦟",
-            "name": "mosquito"
-        },
-        {
-            "emoji": "🪰",
-            "name": "fly"
-        },
-        {
-            "emoji": "🪱",
-            "name": "worm"
-        },
-        {
-            "emoji": "🦠",
-            "name": "microbe"
-        },
-        {
-            "emoji": "💐",
-            "name": "bouquet"
-        },
-        {
-            "emoji": "🌸",
-            "name": "cherry blossom"
-        },
-        {
-            "emoji": "💮",
-            "name": "white flower"
-        },
-        {
-            "emoji": "🪷",
-            "name": "lotus"
-        },
-        {
-            "emoji": "🏵️",
-            "name": "rosette"
-        },
-        {
-            "emoji": "🌹",
-            "name": "rose"
-        },
-        {
-            "emoji": "🥀",
-            "name": "wilted flower"
-        },
-        {
-            "emoji": "🌺",
-            "name": "hibiscus"
-        },
-        {
-            "emoji": "🌻",
-            "name": "sunflower"
-        },
-        {
-            "emoji": "🌼",
-            "name": "blossom"
-        },
-        {
-            "emoji": "🌷",
-            "name": "tulip"
-        },
-        {
-            "emoji": "🪻",
-            "name": "hyacinth"
-        },
-        {
-            "emoji": "🌱",
-            "name": "seedling"
-        },
-        {
-            "emoji": "🪴",
-            "name": "potted plant"
-        },
-        {
-            "emoji": "🌲",
-            "name": "evergreen tree"
-        },
-        {
-            "emoji": "🌳",
-            "name": "deciduous tree"
-        },
-        {
-            "emoji": "🌴",
-            "name": "palm tree"
-        },
-        {
-            "emoji": "🌵",
-            "name": "cactus"
-        },
-        {
-            "emoji": "🌾",
-            "name": "sheaf of rice"
-        },
-        {
-            "emoji": "🌿",
-            "name": "herb"
-        },
-        {
-            "emoji": "☘️",
-            "name": "shamrock"
-        },
-        {
-            "emoji": "🍀",
-            "name": "four leaf clover"
-        },
-        {
-            "emoji": "🍁",
-            "name": "maple leaf"
-        },
-        {
-            "emoji": "🍂",
-            "name": "fallen leaf"
-        },
-        {
-            "emoji": "🍃",
-            "name": "leaf fluttering in wind"
-        },
-        {
-            "emoji": "🪹",
-            "name": "empty nest"
-        },
-        {
-            "emoji": "🪺",
-            "name": "nest with eggs"
-        },
-        {
-            "emoji": "🍄",
-            "name": "mushroom"
-        }
-    ],
-    "Food & Drink": [
-        {
-            "emoji": "🍇",
-            "name": "grapes"
-        },
-        {
-            "emoji": "🍈",
-            "name": "melon"
-        },
-        {
-            "emoji": "🍉",
-            "name": "watermelon"
-        },
-        {
-            "emoji": "🍊",
-            "name": "tangerine"
-        },
-        {
-            "emoji": "🍋",
-            "name": "lemon"
-        },
-        {
-            "emoji": "🍋‍🟩",
-            "name": "lime"
-        },
-        {
-            "emoji": "🍌",
-            "name": "banana"
-        },
-        {
-            "emoji": "🍍",
-            "name": "pineapple"
-        },
-        {
-            "emoji": "🥭",
-            "name": "mango"
-        },
-        {
-            "emoji": "🍎",
-            "name": "red apple"
-        },
-        {
-            "emoji": "🍏",
-            "name": "green apple"
-        },
-        {
-            "emoji": "🍐",
-            "name": "pear"
-        },
-        {
-            "emoji": "🍑",
-            "name": "peach"
-        },
-        {
-            "emoji": "🍒",
-            "name": "cherries"
-        },
-        {
-            "emoji": "🍓",
-            "name": "strawberry"
-        },
-        {
-            "emoji": "🫐",
-            "name": "blueberries"
-        },
-        {
-            "emoji": "🥝",
-            "name": "kiwi fruit"
-        },
-        {
-            "emoji": "🍅",
-            "name": "tomato"
-        },
-        {
-            "emoji": "🫒",
-            "name": "olive"
-        },
-        {
-            "emoji": "🥥",
-            "name": "coconut"
-        },
-        {
-            "emoji": "🥑",
-            "name": "avocado"
-        },
-        {
-            "emoji": "🍆",
-            "name": "eggplant"
-        },
-        {
-            "emoji": "🥔",
-            "name": "potato"
-        },
-        {
-            "emoji": "🥕",
-            "name": "carrot"
-        },
-        {
-            "emoji": "🌽",
-            "name": "ear of corn"
-        },
-        {
-            "emoji": "🌶️",
-            "name": "hot pepper"
-        },
-        {
-            "emoji": "🫑",
-            "name": "bell pepper"
-        },
-        {
-            "emoji": "🥒",
-            "name": "cucumber"
-        },
-        {
-            "emoji": "🥬",
-            "name": "leafy green"
-        },
-        {
-            "emoji": "🥦",
-            "name": "broccoli"
-        },
-        {
-            "emoji": "🧄",
-            "name": "garlic"
-        },
-        {
-            "emoji": "🧅",
-            "name": "onion"
-        },
-        {
-            "emoji": "🥜",
-            "name": "peanuts"
-        },
-        {
-            "emoji": "🫘",
-            "name": "beans"
-        },
-        {
-            "emoji": "🌰",
-            "name": "chestnut"
-        },
-        {
-            "emoji": "🫚",
-            "name": "ginger root"
-        },
-        {
-            "emoji": "🫛",
-            "name": "pea pod"
-        },
-        {
-            "emoji": "🍄‍🟫",
-            "name": "brown mushroom"
-        },
-        {
-            "emoji": "🍞",
-            "name": "bread"
-        },
-        {
-            "emoji": "🥐",
-            "name": "croissant"
-        },
-        {
-            "emoji": "🥖",
-            "name": "baguette bread"
-        },
-        {
-            "emoji": "🫓",
-            "name": "flatbread"
-        },
-        {
-            "emoji": "🥨",
-            "name": "pretzel"
-        },
-        {
-            "emoji": "🥯",
-            "name": "bagel"
-        },
-        {
-            "emoji": "🥞",
-            "name": "pancakes"
-        },
-        {
-            "emoji": "🧇",
-            "name": "waffle"
-        },
-        {
-            "emoji": "🧀",
-            "name": "cheese wedge"
-        },
-        {
-            "emoji": "🍖",
-            "name": "meat on bone"
-        },
-        {
-            "emoji": "🍗",
-            "name": "poultry leg"
-        },
-        {
-            "emoji": "🥩",
-            "name": "cut of meat"
-        },
-        {
-            "emoji": "🥓",
-            "name": "bacon"
-        },
-        {
-            "emoji": "🍔",
-            "name": "hamburger"
-        },
-        {
-            "emoji": "🍟",
-            "name": "french fries"
-        },
-        {
-            "emoji": "🍕",
-            "name": "pizza"
-        },
-        {
-            "emoji": "🌭",
-            "name": "hot dog"
-        },
-        {
-            "emoji": "🥪",
-            "name": "sandwich"
-        },
-        {
-            "emoji": "🌮",
-            "name": "taco"
-        },
-        {
-            "emoji": "🌯",
-            "name": "burrito"
-        },
-        {
-            "emoji": "🫔",
-            "name": "tamale"
-        },
-        {
-            "emoji": "🥙",
-            "name": "stuffed flatbread"
-        },
-        {
-            "emoji": "🧆",
-            "name": "falafel"
-        },
-        {
-            "emoji": "🥚",
-            "name": "egg"
-        },
-        {
-            "emoji": "🍳",
-            "name": "cooking"
-        },
-        {
-            "emoji": "🥘",
-            "name": "shallow pan of food"
-        },
-        {
-            "emoji": "🍲",
-            "name": "pot of food"
-        },
-        {
-            "emoji": "🫕",
-            "name": "fondue"
-        },
-        {
-            "emoji": "🥣",
-            "name": "bowl with spoon"
-        },
-        {
-            "emoji": "🥗",
-            "name": "green salad"
-        },
-        {
-            "emoji": "🍿",
-            "name": "popcorn"
-        },
-        {
-            "emoji": "🧈",
-            "name": "butter"
-        },
-        {
-            "emoji": "🧂",
-            "name": "salt"
-        },
-        {
-            "emoji": "🥫",
-            "name": "canned food"
-        },
-        {
-            "emoji": "🍱",
-            "name": "bento box"
-        },
-        {
-            "emoji": "🍘",
-            "name": "rice cracker"
-        },
-        {
-            "emoji": "🍙",
-            "name": "rice ball"
-        },
-        {
-            "emoji": "🍚",
-            "name": "cooked rice"
-        },
-        {
-            "emoji": "🍛",
-            "name": "curry rice"
-        },
-        {
-            "emoji": "🍜",
-            "name": "steaming bowl"
-        },
-        {
-            "emoji": "🍝",
-            "name": "spaghetti"
-        },
-        {
-            "emoji": "🍠",
-            "name": "roasted sweet potato"
-        },
-        {
-            "emoji": "🍢",
-            "name": "oden"
-        },
-        {
-            "emoji": "🍣",
-            "name": "sushi"
-        },
-        {
-            "emoji": "🍤",
-            "name": "fried shrimp"
-        },
-        {
-            "emoji": "🍥",
-            "name": "fish cake with swirl"
-        },
-        {
-            "emoji": "🥮",
-            "name": "moon cake"
-        },
-        {
-            "emoji": "🍡",
-            "name": "dango"
-        },
-        {
-            "emoji": "🥟",
-            "name": "dumpling"
-        },
-        {
-            "emoji": "🥠",
-            "name": "fortune cookie"
-        },
-        {
-            "emoji": "🥡",
-            "name": "takeout box"
-        },
-        {
-            "emoji": "🦀",
-            "name": "crab"
-        },
-        {
-            "emoji": "🦞",
-            "name": "lobster"
-        },
-        {
-            "emoji": "🦐",
-            "name": "shrimp"
-        },
-        {
-            "emoji": "🦑",
-            "name": "squid"
-        },
-        {
-            "emoji": "🦪",
-            "name": "oyster"
-        },
-        {
-            "emoji": "🍦",
-            "name": "soft ice cream"
-        },
-        {
-            "emoji": "🍧",
-            "name": "shaved ice"
-        },
-        {
-            "emoji": "🍨",
-            "name": "ice cream"
-        },
-        {
-            "emoji": "🍩",
-            "name": "doughnut"
-        },
-        {
-            "emoji": "🍪",
-            "name": "cookie"
-        },
-        {
-            "emoji": "🎂",
-            "name": "birthday cake"
-        },
-        {
-            "emoji": "🍰",
-            "name": "shortcake"
-        },
-        {
-            "emoji": "🧁",
-            "name": "cupcake"
-        },
-        {
-            "emoji": "🥧",
-            "name": "pie"
-        },
-        {
-            "emoji": "🍫",
-            "name": "chocolate bar"
-        },
-        {
-            "emoji": "🍬",
-            "name": "candy"
-        },
-        {
-            "emoji": "🍭",
-            "name": "lollipop"
-        },
-        {
-            "emoji": "🍮",
-            "name": "custard"
-        },
-        {
-            "emoji": "🍯",
-            "name": "honey pot"
-        },
-        {
-            "emoji": "🍼",
-            "name": "baby bottle"
-        },
-        {
-            "emoji": "🥛",
-            "name": "glass of milk"
-        },
-        {
-            "emoji": "☕",
-            "name": "hot beverage"
-        },
-        {
-            "emoji": "🫖",
-            "name": "teapot"
-        },
-        {
-            "emoji": "🍵",
-            "name": "teacup without handle"
-        },
-        {
-            "emoji": "🍶",
-            "name": "sake"
-        },
-        {
-            "emoji": "🍾",
-            "name": "bottle with popping cork"
-        },
-        {
-            "emoji": "🍷",
-            "name": "wine glass"
-        },
-        {
-            "emoji": "🍸",
-            "name": "cocktail glass"
-        },
-        {
-            "emoji": "🍹",
-            "name": "tropical drink"
-        },
-        {
-            "emoji": "🍺",
-            "name": "beer mug"
-        },
-        {
-            "emoji": "🍻",
-            "name": "clinking beer mugs"
-        },
-        {
-            "emoji": "🥂",
-            "name": "clinking glasses"
-        },
-        {
-            "emoji": "🥃",
-            "name": "tumbler glass"
-        },
-        {
-            "emoji": "🫗",
-            "name": "pouring liquid"
-        },
-        {
-            "emoji": "🥤",
-            "name": "cup with straw"
-        },
-        {
-            "emoji": "🧋",
-            "name": "bubble tea"
-        },
-        {
-            "emoji": "🧃",
-            "name": "beverage box"
-        },
-        {
-            "emoji": "🧉",
-            "name": "mate"
-        },
-        {
-            "emoji": "🧊",
-            "name": "ice"
-        },
-        {
-            "emoji": "🥢",
-            "name": "chopsticks"
-        },
-        {
-            "emoji": "🍽️",
-            "name": "fork and knife with plate"
-        },
-        {
-            "emoji": "🍴",
-            "name": "fork and knife"
-        },
-        {
-            "emoji": "🥄",
-            "name": "spoon"
-        },
-        {
-            "emoji": "🔪",
-            "name": "kitchen knife"
-        },
-        {
-            "emoji": "🫙",
-            "name": "jar"
-        },
-        {
-            "emoji": "🏺",
-            "name": "amphora"
-        }
-    ],
-    "Travel & Places": [
-        {
-            "emoji": "🌍",
-            "name": "globe showing Europe-Africa"
-        },
-        {
-            "emoji": "🌎",
-            "name": "globe showing Americas"
-        },
-        {
-            "emoji": "🌏",
-            "name": "globe showing Asia-Australia"
-        },
-        {
-            "emoji": "🌐",
-            "name": "globe with meridians"
-        },
-        {
-            "emoji": "🗺️",
-            "name": "world map"
-        },
-        {
-            "emoji": "🗾",
-            "name": "map of Japan"
-        },
-        {
-            "emoji": "🧭",
-            "name": "compass"
-        },
-        {
-            "emoji": "🏔️",
-            "name": "snow-capped mountain"
-        },
-        {
-            "emoji": "⛰️",
-            "name": "mountain"
-        },
-        {
-            "emoji": "🌋",
-            "name": "volcano"
-        },
-        {
-            "emoji": "🗻",
-            "name": "mount fuji"
-        },
-        {
-            "emoji": "🏕️",
-            "name": "camping"
-        },
-        {
-            "emoji": "🏖️",
-            "name": "beach with umbrella"
-        },
-        {
-            "emoji": "🏜️",
-            "name": "desert"
-        },
-        {
-            "emoji": "🏝️",
-            "name": "desert island"
-        },
-        {
-            "emoji": "🏞️",
-            "name": "national park"
-        },
-        {
-            "emoji": "🏟️",
-            "name": "stadium"
-        },
-        {
-            "emoji": "🏛️",
-            "name": "classical building"
-        },
-        {
-            "emoji": "🏗️",
-            "name": "building construction"
-        },
-        {
-            "emoji": "🧱",
-            "name": "brick"
-        },
-        {
-            "emoji": "🪨",
-            "name": "rock"
-        },
-        {
-            "emoji": "🪵",
-            "name": "wood"
-        },
-        {
-            "emoji": "🛖",
-            "name": "hut"
-        },
-        {
-            "emoji": "🏘️",
-            "name": "houses"
-        },
-        {
-            "emoji": "🏚️",
-            "name": "derelict house"
-        },
-        {
-            "emoji": "🏠",
-            "name": "house"
-        },
-        {
-            "emoji": "🏡",
-            "name": "house with garden"
-        },
-        {
-            "emoji": "🏢",
-            "name": "office building"
-        },
-        {
-            "emoji": "🏣",
-            "name": "Japanese post office"
-        },
-        {
-            "emoji": "🏤",
-            "name": "post office"
-        },
-        {
-            "emoji": "🏥",
-            "name": "hospital"
-        },
-        {
-            "emoji": "🏦",
-            "name": "bank"
-        },
-        {
-            "emoji": "🏨",
-            "name": "hotel"
-        },
-        {
-            "emoji": "🏩",
-            "name": "love hotel"
-        },
-        {
-            "emoji": "🏪",
-            "name": "convenience store"
-        },
-        {
-            "emoji": "🏫",
-            "name": "school"
-        },
-        {
-            "emoji": "🏬",
-            "name": "department store"
-        },
-        {
-            "emoji": "🏭",
-            "name": "factory"
-        },
-        {
-            "emoji": "🏯",
-            "name": "Japanese castle"
-        },
-        {
-            "emoji": "🏰",
-            "name": "castle"
-        },
-        {
-            "emoji": "💒",
-            "name": "wedding"
-        },
-        {
-            "emoji": "🗼",
-            "name": "Tokyo tower"
-        },
-        {
-            "emoji": "🗽",
-            "name": "Statue of Liberty"
-        },
-        {
-            "emoji": "⛪",
-            "name": "church"
-        },
-        {
-            "emoji": "🕌",
-            "name": "mosque"
-        },
-        {
-            "emoji": "🛕",
-            "name": "hindu temple"
-        },
-        {
-            "emoji": "🕍",
-            "name": "synagogue"
-        },
-        {
-            "emoji": "⛩️",
-            "name": "shinto shrine"
-        },
-        {
-            "emoji": "🕋",
-            "name": "kaaba"
-        },
-        {
-            "emoji": "⛲",
-            "name": "fountain"
-        },
-        {
-            "emoji": "⛺",
-            "name": "tent"
-        },
-        {
-            "emoji": "🌁",
-            "name": "foggy"
-        },
-        {
-            "emoji": "🌃",
-            "name": "night with stars"
-        },
-        {
-            "emoji": "🏙️",
-            "name": "cityscape"
-        },
-        {
-            "emoji": "🌄",
-            "name": "sunrise over mountains"
-        },
-        {
-            "emoji": "🌅",
-            "name": "sunrise"
-        },
-        {
-            "emoji": "🌆",
-            "name": "cityscape at dusk"
-        },
-        {
-            "emoji": "🌇",
-            "name": "sunset"
-        },
-        {
-            "emoji": "🌉",
-            "name": "bridge at night"
-        },
-        {
-            "emoji": "♨️",
-            "name": "hot springs"
-        },
-        {
-            "emoji": "🎠",
-            "name": "carousel horse"
-        },
-        {
-            "emoji": "🛝",
-            "name": "playground slide"
-        },
-        {
-            "emoji": "🎡",
-            "name": "ferris wheel"
-        },
-        {
-            "emoji": "🎢",
-            "name": "roller coaster"
-        },
-        {
-            "emoji": "💈",
-            "name": "barber pole"
-        },
-        {
-            "emoji": "🎪",
-            "name": "circus tent"
-        },
-        {
-            "emoji": "🚂",
-            "name": "locomotive"
-        },
-        {
-            "emoji": "🚃",
-            "name": "railway car"
-        },
-        {
-            "emoji": "🚄",
-            "name": "high-speed train"
-        },
-        {
-            "emoji": "🚅",
-            "name": "bullet train"
-        },
-        {
-            "emoji": "🚆",
-            "name": "train"
-        },
-        {
-            "emoji": "🚇",
-            "name": "metro"
-        },
-        {
-            "emoji": "🚈",
-            "name": "light rail"
-        },
-        {
-            "emoji": "🚉",
-            "name": "station"
-        },
-        {
-            "emoji": "🚊",
-            "name": "tram"
-        },
-        {
-            "emoji": "🚝",
-            "name": "monorail"
-        },
-        {
-            "emoji": "🚞",
-            "name": "mountain railway"
-        },
-        {
-            "emoji": "🚋",
-            "name": "tram car"
-        },
-        {
-            "emoji": "🚌",
-            "name": "bus"
-        },
-        {
-            "emoji": "🚍",
-            "name": "oncoming bus"
-        },
-        {
-            "emoji": "🚎",
-            "name": "trolleybus"
-        },
-        {
-            "emoji": "🚐",
-            "name": "minibus"
-        },
-        {
-            "emoji": "🚑",
-            "name": "ambulance"
-        },
-        {
-            "emoji": "🚒",
-            "name": "fire engine"
-        },
-        {
-            "emoji": "🚓",
-            "name": "police car"
-        },
-        {
-            "emoji": "🚔",
-            "name": "oncoming police car"
-        },
-        {
-            "emoji": "🚕",
-            "name": "taxi"
-        },
-        {
-            "emoji": "🚖",
-            "name": "oncoming taxi"
-        },
-        {
-            "emoji": "🚗",
-            "name": "automobile"
-        },
-        {
-            "emoji": "🚘",
-            "name": "oncoming automobile"
-        },
-        {
-            "emoji": "🚙",
-            "name": "sport utility vehicle"
-        },
-        {
-            "emoji": "🛻",
-            "name": "pickup truck"
-        },
-        {
-            "emoji": "🚚",
-            "name": "delivery truck"
-        },
-        {
-            "emoji": "🚛",
-            "name": "articulated lorry"
-        },
-        {
-            "emoji": "🚜",
-            "name": "tractor"
-        },
-        {
-            "emoji": "🏎️",
-            "name": "racing car"
-        },
-        {
-            "emoji": "🏍️",
-            "name": "motorcycle"
-        },
-        {
-            "emoji": "🛵",
-            "name": "motor scooter"
-        },
-        {
-            "emoji": "🦽",
-            "name": "manual wheelchair"
-        },
-        {
-            "emoji": "🦼",
-            "name": "motorized wheelchair"
-        },
-        {
-            "emoji": "🛺",
-            "name": "auto rickshaw"
-        },
-        {
-            "emoji": "🚲",
-            "name": "bicycle"
-        },
-        {
-            "emoji": "🛴",
-            "name": "kick scooter"
-        },
-        {
-            "emoji": "🛹",
-            "name": "skateboard"
-        },
-        {
-            "emoji": "🛼",
-            "name": "roller skate"
-        },
-        {
-            "emoji": "🚏",
-            "name": "bus stop"
-        },
-        {
-            "emoji": "🛣️",
-            "name": "motorway"
-        },
-        {
-            "emoji": "🛤️",
-            "name": "railway track"
-        },
-        {
-            "emoji": "🛢️",
-            "name": "oil drum"
-        },
-        {
-            "emoji": "⛽",
-            "name": "fuel pump"
-        },
-        {
-            "emoji": "🛞",
-            "name": "wheel"
-        },
-        {
-            "emoji": "🚨",
-            "name": "police car light"
-        },
-        {
-            "emoji": "🚥",
-            "name": "horizontal traffic light"
-        },
-        {
-            "emoji": "🚦",
-            "name": "vertical traffic light"
-        },
-        {
-            "emoji": "🛑",
-            "name": "stop sign"
-        },
-        {
-            "emoji": "🚧",
-            "name": "construction"
-        },
-        {
-            "emoji": "⚓",
-            "name": "anchor"
-        },
-        {
-            "emoji": "🛟",
-            "name": "ring buoy"
-        },
-        {
-            "emoji": "⛵",
-            "name": "sailboat"
-        },
-        {
-            "emoji": "🛶",
-            "name": "canoe"
-        },
-        {
-            "emoji": "🚤",
-            "name": "speedboat"
-        },
-        {
-            "emoji": "🛳️",
-            "name": "passenger ship"
-        },
-        {
-            "emoji": "⛴️",
-            "name": "ferry"
-        },
-        {
-            "emoji": "🛥️",
-            "name": "motor boat"
-        },
-        {
-            "emoji": "🚢",
-            "name": "ship"
-        },
-        {
-            "emoji": "✈️",
-            "name": "airplane"
-        },
-        {
-            "emoji": "🛩️",
-            "name": "small airplane"
-        },
-        {
-            "emoji": "🛫",
-            "name": "airplane departure"
-        },
-        {
-            "emoji": "🛬",
-            "name": "airplane arrival"
-        },
-        {
-            "emoji": "🪂",
-            "name": "parachute"
-        },
-        {
-            "emoji": "💺",
-            "name": "seat"
-        },
-        {
-            "emoji": "🚁",
-            "name": "helicopter"
-        },
-        {
-            "emoji": "🚟",
-            "name": "suspension railway"
-        },
-        {
-            "emoji": "🚠",
-            "name": "mountain cableway"
-        },
-        {
-            "emoji": "🚡",
-            "name": "aerial tramway"
-        },
-        {
-            "emoji": "🛰️",
-            "name": "satellite"
-        },
-        {
-            "emoji": "🚀",
-            "name": "rocket"
-        },
-        {
-            "emoji": "🛸",
-            "name": "flying saucer"
-        },
-        {
-            "emoji": "🛎️",
-            "name": "bellhop bell"
-        },
-        {
-            "emoji": "🧳",
-            "name": "luggage"
-        },
-        {
-            "emoji": "⌛",
-            "name": "hourglass done"
-        },
-        {
-            "emoji": "⏳",
-            "name": "hourglass not done"
-        },
-        {
-            "emoji": "⌚",
-            "name": "watch"
-        },
-        {
-            "emoji": "⏰",
-            "name": "alarm clock"
-        },
-        {
-            "emoji": "⏱️",
-            "name": "stopwatch"
-        },
-        {
-            "emoji": "⏲️",
-            "name": "timer clock"
-        },
-        {
-            "emoji": "🕰️",
-            "name": "mantelpiece clock"
-        },
-        {
-            "emoji": "🕛",
-            "name": "twelve o’clock"
-        },
-        {
-            "emoji": "🕧",
-            "name": "twelve-thirty"
-        },
-        {
-            "emoji": "🕐",
-            "name": "one o’clock"
-        },
-        {
-            "emoji": "🕜",
-            "name": "one-thirty"
-        },
-        {
-            "emoji": "🕑",
-            "name": "two o’clock"
-        },
-        {
-            "emoji": "🕝",
-            "name": "two-thirty"
-        },
-        {
-            "emoji": "🕒",
-            "name": "three o’clock"
-        },
-        {
-            "emoji": "🕞",
-            "name": "three-thirty"
-        },
-        {
-            "emoji": "🕓",
-            "name": "four o’clock"
-        },
-        {
-            "emoji": "🕟",
-            "name": "four-thirty"
-        },
-        {
-            "emoji": "🕔",
-            "name": "five o’clock"
-        },
-        {
-            "emoji": "🕠",
-            "name": "five-thirty"
-        },
-        {
-            "emoji": "🕕",
-            "name": "six o’clock"
-        },
-        {
-            "emoji": "🕡",
-            "name": "six-thirty"
-        },
-        {
-            "emoji": "🕖",
-            "name": "seven o’clock"
-        },
-        {
-            "emoji": "🕢",
-            "name": "seven-thirty"
-        },
-        {
-            "emoji": "🕗",
-            "name": "eight o’clock"
-        },
-        {
-            "emoji": "🕣",
-            "name": "eight-thirty"
-        },
-        {
-            "emoji": "🕘",
-            "name": "nine o’clock"
-        },
-        {
-            "emoji": "🕤",
-            "name": "nine-thirty"
-        },
-        {
-            "emoji": "🕙",
-            "name": "ten o’clock"
-        },
-        {
-            "emoji": "🕥",
-            "name": "ten-thirty"
-        },
-        {
-            "emoji": "🕚",
-            "name": "eleven o’clock"
-        },
-        {
-            "emoji": "🕦",
-            "name": "eleven-thirty"
-        },
-        {
-            "emoji": "🌑",
-            "name": "new moon"
-        },
-        {
-            "emoji": "🌒",
-            "name": "waxing crescent moon"
-        },
-        {
-            "emoji": "🌓",
-            "name": "first quarter moon"
-        },
-        {
-            "emoji": "🌔",
-            "name": "waxing gibbous moon"
-        },
-        {
-            "emoji": "🌕",
-            "name": "full moon"
-        },
-        {
-            "emoji": "🌖",
-            "name": "waning gibbous moon"
-        },
-        {
-            "emoji": "🌗",
-            "name": "last quarter moon"
-        },
-        {
-            "emoji": "🌘",
-            "name": "waning crescent moon"
-        },
-        {
-            "emoji": "🌙",
-            "name": "crescent moon"
-        },
-        {
-            "emoji": "🌚",
-            "name": "new moon face"
-        },
-        {
-            "emoji": "🌛",
-            "name": "first quarter moon face"
-        },
-        {
-            "emoji": "🌜",
-            "name": "last quarter moon face"
-        },
-        {
-            "emoji": "🌡️",
-            "name": "thermometer"
-        },
-        {
-            "emoji": "☀️",
-            "name": "sun"
-        },
-        {
-            "emoji": "🌝",
-            "name": "full moon face"
-        },
-        {
-            "emoji": "🌞",
-            "name": "sun with face"
-        },
-        {
-            "emoji": "🪐",
-            "name": "ringed planet"
-        },
-        {
-            "emoji": "⭐",
-            "name": "star"
-        },
-        {
-            "emoji": "🌟",
-            "name": "glowing star"
-        },
-        {
-            "emoji": "🌠",
-            "name": "shooting star"
-        },
-        {
-            "emoji": "🌌",
-            "name": "milky way"
-        },
-        {
-            "emoji": "☁️",
-            "name": "cloud"
-        },
-        {
-            "emoji": "⛅",
-            "name": "sun behind cloud"
-        },
-        {
-            "emoji": "⛈️",
-            "name": "cloud with lightning and rain"
-        },
-        {
-            "emoji": "🌤️",
-            "name": "sun behind small cloud"
-        },
-        {
-            "emoji": "🌥️",
-            "name": "sun behind large cloud"
-        },
-        {
-            "emoji": "🌦️",
-            "name": "sun behind rain cloud"
-        },
-        {
-            "emoji": "🌧️",
-            "name": "cloud with rain"
-        },
-        {
-            "emoji": "🌨️",
-            "name": "cloud with snow"
-        },
-        {
-            "emoji": "🌩️",
-            "name": "cloud with lightning"
-        },
-        {
-            "emoji": "🌪️",
-            "name": "tornado"
-        },
-        {
-            "emoji": "🌫️",
-            "name": "fog"
-        },
-        {
-            "emoji": "🌬️",
-            "name": "wind face"
-        },
-        {
-            "emoji": "🌀",
-            "name": "cyclone"
-        },
-        {
-            "emoji": "🌈",
-            "name": "rainbow"
-        },
-        {
-            "emoji": "🌂",
-            "name": "closed umbrella"
-        },
-        {
-            "emoji": "☂️",
-            "name": "umbrella"
-        },
-        {
-            "emoji": "☔",
-            "name": "umbrella with rain drops"
-        },
-        {
-            "emoji": "⛱️",
-            "name": "umbrella on ground"
-        },
-        {
-            "emoji": "⚡",
-            "name": "high voltage"
-        },
-        {
-            "emoji": "❄️",
-            "name": "snowflake"
-        },
-        {
-            "emoji": "☃️",
-            "name": "snowman"
-        },
-        {
-            "emoji": "⛄",
-            "name": "snowman without snow"
-        },
-        {
-            "emoji": "☄️",
-            "name": "comet"
-        },
-        {
-            "emoji": "🔥",
-            "name": "fire"
-        },
-        {
-            "emoji": "💧",
-            "name": "droplet"
-        },
-        {
-            "emoji": "🌊",
-            "name": "water wave"
-        }
-    ],
-    "Activities": [
-        {
-            "emoji": "🎃",
-            "name": "jack-o-lantern"
-        },
-        {
-            "emoji": "🎄",
-            "name": "Christmas tree"
-        },
-        {
-            "emoji": "🎆",
-            "name": "fireworks"
-        },
-        {
-            "emoji": "🎇",
-            "name": "sparkler"
-        },
-        {
-            "emoji": "🧨",
-            "name": "firecracker"
-        },
-        {
-            "emoji": "✨",
-            "name": "sparkles"
-        },
-        {
-            "emoji": "🎈",
-            "name": "balloon"
-        },
-        {
-            "emoji": "🎉",
-            "name": "party popper"
-        },
-        {
-            "emoji": "🎊",
-            "name": "confetti ball"
-        },
-        {
-            "emoji": "🎋",
-            "name": "tanabata tree"
-        },
-        {
-            "emoji": "🎍",
-            "name": "pine decoration"
-        },
-        {
-            "emoji": "🎎",
-            "name": "Japanese dolls"
-        },
-        {
-            "emoji": "🎏",
-            "name": "carp streamer"
-        },
-        {
-            "emoji": "🎐",
-            "name": "wind chime"
-        },
-        {
-            "emoji": "🎑",
-            "name": "moon viewing ceremony"
-        },
-        {
-            "emoji": "🧧",
-            "name": "red envelope"
-        },
-        {
-            "emoji": "🎀",
-            "name": "ribbon"
-        },
-        {
-            "emoji": "🎁",
-            "name": "wrapped gift"
-        },
-        {
-            "emoji": "🎗️",
-            "name": "reminder ribbon"
-        },
-        {
-            "emoji": "🎟️",
-            "name": "admission tickets"
-        },
-        {
-            "emoji": "🎫",
-            "name": "ticket"
-        },
-        {
-            "emoji": "🎖️",
-            "name": "military medal"
-        },
-        {
-            "emoji": "🏆",
-            "name": "trophy"
-        },
-        {
-            "emoji": "🏅",
-            "name": "sports medal"
-        },
-        {
-            "emoji": "🥇",
-            "name": "1st place medal"
-        },
-        {
-            "emoji": "🥈",
-            "name": "2nd place medal"
-        },
-        {
-            "emoji": "🥉",
-            "name": "3rd place medal"
-        },
-        {
-            "emoji": "⚽",
-            "name": "soccer ball"
-        },
-        {
-            "emoji": "⚾",
-            "name": "baseball"
-        },
-        {
-            "emoji": "🥎",
-            "name": "softball"
-        },
-        {
-            "emoji": "🏀",
-            "name": "basketball"
-        },
-        {
-            "emoji": "🏐",
-            "name": "volleyball"
-        },
-        {
-            "emoji": "🏈",
-            "name": "american football"
-        },
-        {
-            "emoji": "🏉",
-            "name": "rugby football"
-        },
-        {
-            "emoji": "🎾",
-            "name": "tennis"
-        },
-        {
-            "emoji": "🥏",
-            "name": "flying disc"
-        },
-        {
-            "emoji": "🎳",
-            "name": "bowling"
-        },
-        {
-            "emoji": "🏏",
-            "name": "cricket game"
-        },
-        {
-            "emoji": "🏑",
-            "name": "field hockey"
-        },
-        {
-            "emoji": "🏒",
-            "name": "ice hockey"
-        },
-        {
-            "emoji": "🥍",
-            "name": "lacrosse"
-        },
-        {
-            "emoji": "🏓",
-            "name": "ping pong"
-        },
-        {
-            "emoji": "🏸",
-            "name": "badminton"
-        },
-        {
-            "emoji": "🥊",
-            "name": "boxing glove"
-        },
-        {
-            "emoji": "🥋",
-            "name": "martial arts uniform"
-        },
-        {
-            "emoji": "🥅",
-            "name": "goal net"
-        },
-        {
-            "emoji": "⛳",
-            "name": "flag in hole"
-        },
-        {
-            "emoji": "⛸️",
-            "name": "ice skate"
-        },
-        {
-            "emoji": "🎣",
-            "name": "fishing pole"
-        },
-        {
-            "emoji": "🤿",
-            "name": "diving mask"
-        },
-        {
-            "emoji": "🎽",
-            "name": "running shirt"
-        },
-        {
-            "emoji": "🎿",
-            "name": "skis"
-        },
-        {
-            "emoji": "🛷",
-            "name": "sled"
-        },
-        {
-            "emoji": "🥌",
-            "name": "curling stone"
-        },
-        {
-            "emoji": "🎯",
-            "name": "bullseye"
-        },
-        {
-            "emoji": "🪀",
-            "name": "yo-yo"
-        },
-        {
-            "emoji": "🪁",
-            "name": "kite"
-        },
-        {
-            "emoji": "🔫",
-            "name": "water pistol"
-        },
-        {
-            "emoji": "🎱",
-            "name": "pool 8 ball"
-        },
-        {
-            "emoji": "🔮",
-            "name": "crystal ball"
-        },
-        {
-            "emoji": "🪄",
-            "name": "magic wand"
-        },
-        {
-            "emoji": "🎮",
-            "name": "video game"
-        },
-        {
-            "emoji": "🕹️",
-            "name": "joystick"
-        },
-        {
-            "emoji": "🎰",
-            "name": "slot machine"
-        },
-        {
-            "emoji": "🎲",
-            "name": "game die"
-        },
-        {
-            "emoji": "🧩",
-            "name": "puzzle piece"
-        },
-        {
-            "emoji": "🧸",
-            "name": "teddy bear"
-        },
-        {
-            "emoji": "🪅",
-            "name": "piñata"
-        },
-        {
-            "emoji": "🪩",
-            "name": "mirror ball"
-        },
-        {
-            "emoji": "🪆",
-            "name": "nesting dolls"
-        },
-        {
-            "emoji": "♠️",
-            "name": "spade suit"
-        },
-        {
-            "emoji": "♥️",
-            "name": "heart suit"
-        },
-        {
-            "emoji": "♦️",
-            "name": "diamond suit"
-        },
-        {
-            "emoji": "♣️",
-            "name": "club suit"
-        },
-        {
-            "emoji": "♟️",
-            "name": "chess pawn"
-        },
-        {
-            "emoji": "🃏",
-            "name": "joker"
-        },
-        {
-            "emoji": "🀄",
-            "name": "mahjong red dragon"
-        },
-        {
-            "emoji": "🎴",
-            "name": "flower playing cards"
-        },
-        {
-            "emoji": "🎭",
-            "name": "performing arts"
-        },
-        {
-            "emoji": "🖼️",
-            "name": "framed picture"
-        },
-        {
-            "emoji": "🎨",
-            "name": "artist palette"
-        },
-        {
-            "emoji": "🧵",
-            "name": "thread"
-        },
-        {
-            "emoji": "🪡",
-            "name": "sewing needle"
-        },
-        {
-            "emoji": "🧶",
-            "name": "yarn"
-        },
-        {
-            "emoji": "🪢",
-            "name": "knot"
-        }
-    ],
-    "Objects": [
-        {
-            "emoji": "👓",
-            "name": "glasses"
-        },
-        {
-            "emoji": "🕶️",
-            "name": "sunglasses"
-        },
-        {
-            "emoji": "🥽",
-            "name": "goggles"
-        },
-        {
-            "emoji": "🥼",
-            "name": "lab coat"
-        },
-        {
-            "emoji": "🦺",
-            "name": "safety vest"
-        },
-        {
-            "emoji": "👔",
-            "name": "necktie"
-        },
-        {
-            "emoji": "👕",
-            "name": "t-shirt"
-        },
-        {
-            "emoji": "👖",
-            "name": "jeans"
-        },
-        {
-            "emoji": "🧣",
-            "name": "scarf"
-        },
-        {
-            "emoji": "🧤",
-            "name": "gloves"
-        },
-        {
-            "emoji": "🧥",
-            "name": "coat"
-        },
-        {
-            "emoji": "🧦",
-            "name": "socks"
-        },
-        {
-            "emoji": "👗",
-            "name": "dress"
-        },
-        {
-            "emoji": "👘",
-            "name": "kimono"
-        },
-        {
-            "emoji": "🥻",
-            "name": "sari"
-        },
-        {
-            "emoji": "🩱",
-            "name": "one-piece swimsuit"
-        },
-        {
-            "emoji": "🩲",
-            "name": "briefs"
-        },
-        {
-            "emoji": "🩳",
-            "name": "shorts"
-        },
-        {
-            "emoji": "👙",
-            "name": "bikini"
-        },
-        {
-            "emoji": "👚",
-            "name": "woman’s clothes"
-        },
-        {
-            "emoji": "🪭",
-            "name": "folding hand fan"
-        },
-        {
-            "emoji": "👛",
-            "name": "purse"
-        },
-        {
-            "emoji": "👜",
-            "name": "handbag"
-        },
-        {
-            "emoji": "👝",
-            "name": "clutch bag"
-        },
-        {
-            "emoji": "🛍️",
-            "name": "shopping bags"
-        },
-        {
-            "emoji": "🎒",
-            "name": "backpack"
-        },
-        {
-            "emoji": "🩴",
-            "name": "thong sandal"
-        },
-        {
-            "emoji": "👞",
-            "name": "man’s shoe"
-        },
-        {
-            "emoji": "👟",
-            "name": "running shoe"
-        },
-        {
-            "emoji": "🥾",
-            "name": "hiking boot"
-        },
-        {
-            "emoji": "🥿",
-            "name": "flat shoe"
-        },
-        {
-            "emoji": "👠",
-            "name": "high-heeled shoe"
-        },
-        {
-            "emoji": "👡",
-            "name": "woman’s sandal"
-        },
-        {
-            "emoji": "🩰",
-            "name": "ballet shoes"
-        },
-        {
-            "emoji": "👢",
-            "name": "woman’s boot"
-        },
-        {
-            "emoji": "🪮",
-            "name": "hair pick"
-        },
-        {
-            "emoji": "👑",
-            "name": "crown"
-        },
-        {
-            "emoji": "👒",
-            "name": "woman’s hat"
-        },
-        {
-            "emoji": "🎩",
-            "name": "top hat"
-        },
-        {
-            "emoji": "🎓",
-            "name": "graduation cap"
-        },
-        {
-            "emoji": "🧢",
-            "name": "billed cap"
-        },
-        {
-            "emoji": "🪖",
-            "name": "military helmet"
-        },
-        {
-            "emoji": "⛑️",
-            "name": "rescue worker’s helmet"
-        },
-        {
-            "emoji": "📿",
-            "name": "prayer beads"
-        },
-        {
-            "emoji": "💄",
-            "name": "lipstick"
-        },
-        {
-            "emoji": "💍",
-            "name": "ring"
-        },
-        {
-            "emoji": "💎",
-            "name": "gem stone"
-        },
-        {
-            "emoji": "🔇",
-            "name": "muted speaker"
-        },
-        {
-            "emoji": "🔈",
-            "name": "speaker low volume"
-        },
-        {
-            "emoji": "🔉",
-            "name": "speaker medium volume"
-        },
-        {
-            "emoji": "🔊",
-            "name": "speaker high volume"
-        },
-        {
-            "emoji": "📢",
-            "name": "loudspeaker"
-        },
-        {
-            "emoji": "📣",
-            "name": "megaphone"
-        },
-        {
-            "emoji": "📯",
-            "name": "postal horn"
-        },
-        {
-            "emoji": "🔔",
-            "name": "bell"
-        },
-        {
-            "emoji": "🔕",
-            "name": "bell with slash"
-        },
-        {
-            "emoji": "🎼",
-            "name": "musical score"
-        },
-        {
-            "emoji": "🎵",
-            "name": "musical note"
-        },
-        {
-            "emoji": "🎶",
-            "name": "musical notes"
-        },
-        {
-            "emoji": "🎙️",
-            "name": "studio microphone"
-        },
-        {
-            "emoji": "🎚️",
-            "name": "level slider"
-        },
-        {
-            "emoji": "🎛️",
-            "name": "control knobs"
-        },
-        {
-            "emoji": "🎤",
-            "name": "microphone"
-        },
-        {
-            "emoji": "🎧",
-            "name": "headphone"
-        },
-        {
-            "emoji": "📻",
-            "name": "radio"
-        },
-        {
-            "emoji": "🎷",
-            "name": "saxophone"
-        },
-        {
-            "emoji": "🪗",
-            "name": "accordion"
-        },
-        {
-            "emoji": "🎸",
-            "name": "guitar"
-        },
-        {
-            "emoji": "🎹",
-            "name": "musical keyboard"
-        },
-        {
-            "emoji": "🎺",
-            "name": "trumpet"
-        },
-        {
-            "emoji": "🎻",
-            "name": "violin"
-        },
-        {
-            "emoji": "🪕",
-            "name": "banjo"
-        },
-        {
-            "emoji": "🥁",
-            "name": "drum"
-        },
-        {
-            "emoji": "🪘",
-            "name": "long drum"
-        },
-        {
-            "emoji": "🪇",
-            "name": "maracas"
-        },
-        {
-            "emoji": "🪈",
-            "name": "flute"
-        },
-        {
-            "emoji": "📱",
-            "name": "mobile phone"
-        },
-        {
-            "emoji": "📲",
-            "name": "mobile phone with arrow"
-        },
-        {
-            "emoji": "☎️",
-            "name": "telephone"
-        },
-        {
-            "emoji": "📞",
-            "name": "telephone receiver"
-        },
-        {
-            "emoji": "📟",
-            "name": "pager"
-        },
-        {
-            "emoji": "📠",
-            "name": "fax machine"
-        },
-        {
-            "emoji": "🔋",
-            "name": "battery"
-        },
-        {
-            "emoji": "🪫",
-            "name": "low battery"
-        },
-        {
-            "emoji": "🔌",
-            "name": "electric plug"
-        },
-        {
-            "emoji": "💻",
-            "name": "laptop"
-        },
-        {
-            "emoji": "🖥️",
-            "name": "desktop computer"
-        },
-        {
-            "emoji": "🖨️",
-            "name": "printer"
-        },
-        {
-            "emoji": "⌨️",
-            "name": "keyboard"
-        },
-        {
-            "emoji": "🖱️",
-            "name": "computer mouse"
-        },
-        {
-            "emoji": "🖲️",
-            "name": "trackball"
-        },
-        {
-            "emoji": "💽",
-            "name": "computer disk"
-        },
-        {
-            "emoji": "💾",
-            "name": "floppy disk"
-        },
-        {
-            "emoji": "💿",
-            "name": "optical disk"
-        },
-        {
-            "emoji": "📀",
-            "name": "dvd"
-        },
-        {
-            "emoji": "🧮",
-            "name": "abacus"
-        },
-        {
-            "emoji": "🎥",
-            "name": "movie camera"
-        },
-        {
-            "emoji": "🎞️",
-            "name": "film frames"
-        },
-        {
-            "emoji": "📽️",
-            "name": "film projector"
-        },
-        {
-            "emoji": "🎬",
-            "name": "clapper board"
-        },
-        {
-            "emoji": "📺",
-            "name": "television"
-        },
-        {
-            "emoji": "📷",
-            "name": "camera"
-        },
-        {
-            "emoji": "📸",
-            "name": "camera with flash"
-        },
-        {
-            "emoji": "📹",
-            "name": "video camera"
-        },
-        {
-            "emoji": "📼",
-            "name": "videocassette"
-        },
-        {
-            "emoji": "🔍",
-            "name": "magnifying glass tilted left"
-        },
-        {
-            "emoji": "🔎",
-            "name": "magnifying glass tilted right"
-        },
-        {
-            "emoji": "🕯️",
-            "name": "candle"
-        },
-        {
-            "emoji": "💡",
-            "name": "light bulb"
-        },
-        {
-            "emoji": "🔦",
-            "name": "flashlight"
-        },
-        {
-            "emoji": "🏮",
-            "name": "red paper lantern"
-        },
-        {
-            "emoji": "🪔",
-            "name": "diya lamp"
-        },
-        {
-            "emoji": "📔",
-            "name": "notebook with decorative cover"
-        },
-        {
-            "emoji": "📕",
-            "name": "closed book"
-        },
-        {
-            "emoji": "📖",
-            "name": "open book"
-        },
-        {
-            "emoji": "📗",
-            "name": "green book"
-        },
-        {
-            "emoji": "📘",
-            "name": "blue book"
-        },
-        {
-            "emoji": "📙",
-            "name": "orange book"
-        },
-        {
-            "emoji": "📚",
-            "name": "books"
-        },
-        {
-            "emoji": "📓",
-            "name": "notebook"
-        },
-        {
-            "emoji": "📒",
-            "name": "ledger"
-        },
-        {
-            "emoji": "📃",
-            "name": "page with curl"
-        },
-        {
-            "emoji": "📜",
-            "name": "scroll"
-        },
-        {
-            "emoji": "📄",
-            "name": "page facing up"
-        },
-        {
-            "emoji": "📰",
-            "name": "newspaper"
-        },
-        {
-            "emoji": "🗞️",
-            "name": "rolled-up newspaper"
-        },
-        {
-            "emoji": "📑",
-            "name": "bookmark tabs"
-        },
-        {
-            "emoji": "🔖",
-            "name": "bookmark"
-        },
-        {
-            "emoji": "🏷️",
-            "name": "label"
-        },
-        {
-            "emoji": "💰",
-            "name": "money bag"
-        },
-        {
-            "emoji": "🪙",
-            "name": "coin"
-        },
-        {
-            "emoji": "💴",
-            "name": "yen banknote"
-        },
-        {
-            "emoji": "💵",
-            "name": "dollar banknote"
-        },
-        {
-            "emoji": "💶",
-            "name": "euro banknote"
-        },
-        {
-            "emoji": "💷",
-            "name": "pound banknote"
-        },
-        {
-            "emoji": "💸",
-            "name": "money with wings"
-        },
-        {
-            "emoji": "💳",
-            "name": "credit card"
-        },
-        {
-            "emoji": "🧾",
-            "name": "receipt"
-        },
-        {
-            "emoji": "💹",
-            "name": "chart increasing with yen"
-        },
-        {
-            "emoji": "✉️",
-            "name": "envelope"
-        },
-        {
-            "emoji": "📧",
-            "name": "e-mail"
-        },
-        {
-            "emoji": "📨",
-            "name": "incoming envelope"
-        },
-        {
-            "emoji": "📩",
-            "name": "envelope with arrow"
-        },
-        {
-            "emoji": "📤",
-            "name": "outbox tray"
-        },
-        {
-            "emoji": "📥",
-            "name": "inbox tray"
-        },
-        {
-            "emoji": "📦",
-            "name": "package"
-        },
-        {
-            "emoji": "📫",
-            "name": "closed mailbox with raised flag"
-        },
-        {
-            "emoji": "📪",
-            "name": "closed mailbox with lowered flag"
-        },
-        {
-            "emoji": "📬",
-            "name": "open mailbox with raised flag"
-        },
-        {
-            "emoji": "📭",
-            "name": "open mailbox with lowered flag"
-        },
-        {
-            "emoji": "📮",
-            "name": "postbox"
-        },
-        {
-            "emoji": "🗳️",
-            "name": "ballot box with ballot"
-        },
-        {
-            "emoji": "✏️",
-            "name": "pencil"
-        },
-        {
-            "emoji": "✒️",
-            "name": "black nib"
-        },
-        {
-            "emoji": "🖋️",
-            "name": "fountain pen"
-        },
-        {
-            "emoji": "🖊️",
-            "name": "pen"
-        },
-        {
-            "emoji": "🖌️",
-            "name": "paintbrush"
-        },
-        {
-            "emoji": "🖍️",
-            "name": "crayon"
-        },
-        {
-            "emoji": "📝",
-            "name": "memo"
-        },
-        {
-            "emoji": "💼",
-            "name": "briefcase"
-        },
-        {
-            "emoji": "📁",
-            "name": "file folder"
-        },
-        {
-            "emoji": "📂",
-            "name": "open file folder"
-        },
-        {
-            "emoji": "🗂️",
-            "name": "card index dividers"
-        },
-        {
-            "emoji": "📅",
-            "name": "calendar"
-        },
-        {
-            "emoji": "📆",
-            "name": "tear-off calendar"
-        },
-        {
-            "emoji": "🗒️",
-            "name": "spiral notepad"
-        },
-        {
-            "emoji": "🗓️",
-            "name": "spiral calendar"
-        },
-        {
-            "emoji": "📇",
-            "name": "card index"
-        },
-        {
-            "emoji": "📈",
-            "name": "chart increasing"
-        },
-        {
-            "emoji": "📉",
-            "name": "chart decreasing"
-        },
-        {
-            "emoji": "📊",
-            "name": "bar chart"
-        },
-        {
-            "emoji": "📋",
-            "name": "clipboard"
-        },
-        {
-            "emoji": "📌",
-            "name": "pushpin"
-        },
-        {
-            "emoji": "📍",
-            "name": "round pushpin"
-        },
-        {
-            "emoji": "📎",
-            "name": "paperclip"
-        },
-        {
-            "emoji": "🖇️",
-            "name": "linked paperclips"
-        },
-        {
-            "emoji": "📏",
-            "name": "straight ruler"
-        },
-        {
-            "emoji": "📐",
-            "name": "triangular ruler"
-        },
-        {
-            "emoji": "✂️",
-            "name": "scissors"
-        },
-        {
-            "emoji": "🗃️",
-            "name": "card file box"
-        },
-        {
-            "emoji": "🗄️",
-            "name": "file cabinet"
-        },
-        {
-            "emoji": "🗑️",
-            "name": "wastebasket"
-        },
-        {
-            "emoji": "🔒",
-            "name": "locked"
-        },
-        {
-            "emoji": "🔓",
-            "name": "unlocked"
-        },
-        {
-            "emoji": "🔏",
-            "name": "locked with pen"
-        },
-        {
-            "emoji": "🔐",
-            "name": "locked with key"
-        },
-        {
-            "emoji": "🔑",
-            "name": "key"
-        },
-        {
-            "emoji": "🗝️",
-            "name": "old key"
-        },
-        {
-            "emoji": "🔨",
-            "name": "hammer"
-        },
-        {
-            "emoji": "🪓",
-            "name": "axe"
-        },
-        {
-            "emoji": "⛏️",
-            "name": "pick"
-        },
-        {
-            "emoji": "⚒️",
-            "name": "hammer and pick"
-        },
-        {
-            "emoji": "🛠️",
-            "name": "hammer and wrench"
-        },
-        {
-            "emoji": "🗡️",
-            "name": "dagger"
-        },
-        {
-            "emoji": "⚔️",
-            "name": "crossed swords"
-        },
-        {
-            "emoji": "💣",
-            "name": "bomb"
-        },
-        {
-            "emoji": "🪃",
-            "name": "boomerang"
-        },
-        {
-            "emoji": "🏹",
-            "name": "bow and arrow"
-        },
-        {
-            "emoji": "🛡️",
-            "name": "shield"
-        },
-        {
-            "emoji": "🪚",
-            "name": "carpentry saw"
-        },
-        {
-            "emoji": "🔧",
-            "name": "wrench"
-        },
-        {
-            "emoji": "🪛",
-            "name": "screwdriver"
-        },
-        {
-            "emoji": "🔩",
-            "name": "nut and bolt"
-        },
-        {
-            "emoji": "⚙️",
-            "name": "gear"
-        },
-        {
-            "emoji": "🗜️",
-            "name": "clamp"
-        },
-        {
-            "emoji": "⚖️",
-            "name": "balance scale"
-        },
-        {
-            "emoji": "🦯",
-            "name": "white cane"
-        },
-        {
-            "emoji": "🔗",
-            "name": "link"
-        },
-        {
-            "emoji": "⛓️‍💥",
-            "name": "broken chain"
-        },
-        {
-            "emoji": "⛓️",
-            "name": "chains"
-        },
-        {
-            "emoji": "🪝",
-            "name": "hook"
-        },
-        {
-            "emoji": "🧰",
-            "name": "toolbox"
-        },
-        {
-            "emoji": "🧲",
-            "name": "magnet"
-        },
-        {
-            "emoji": "🪜",
-            "name": "ladder"
-        },
-        {
-            "emoji": "⚗️",
-            "name": "alembic"
-        },
-        {
-            "emoji": "🧪",
-            "name": "test tube"
-        },
-        {
-            "emoji": "🧫",
-            "name": "petri dish"
-        },
-        {
-            "emoji": "🧬",
-            "name": "dna"
-        },
-        {
-            "emoji": "🔬",
-            "name": "microscope"
-        },
-        {
-            "emoji": "🔭",
-            "name": "telescope"
-        },
-        {
-            "emoji": "📡",
-            "name": "satellite antenna"
-        },
-        {
-            "emoji": "💉",
-            "name": "syringe"
-        },
-        {
-            "emoji": "🩸",
-            "name": "drop of blood"
-        },
-        {
-            "emoji": "💊",
-            "name": "pill"
-        },
-        {
-            "emoji": "🩹",
-            "name": "adhesive bandage"
-        },
-        {
-            "emoji": "🩼",
-            "name": "crutch"
-        },
-        {
-            "emoji": "🩺",
-            "name": "stethoscope"
-        },
-        {
-            "emoji": "🩻",
-            "name": "x-ray"
-        },
-        {
-            "emoji": "🚪",
-            "name": "door"
-        },
-        {
-            "emoji": "🛗",
-            "name": "elevator"
-        },
-        {
-            "emoji": "🪞",
-            "name": "mirror"
-        },
-        {
-            "emoji": "🪟",
-            "name": "window"
-        },
-        {
-            "emoji": "🛏️",
-            "name": "bed"
-        },
-        {
-            "emoji": "🛋️",
-            "name": "couch and lamp"
-        },
-        {
-            "emoji": "🪑",
-            "name": "chair"
-        },
-        {
-            "emoji": "🚽",
-            "name": "toilet"
-        },
-        {
-            "emoji": "🪠",
-            "name": "plunger"
-        },
-        {
-            "emoji": "🚿",
-            "name": "shower"
-        },
-        {
-            "emoji": "🛁",
-            "name": "bathtub"
-        },
-        {
-            "emoji": "🪤",
-            "name": "mouse trap"
-        },
-        {
-            "emoji": "🪒",
-            "name": "razor"
-        },
-        {
-            "emoji": "🧴",
-            "name": "lotion bottle"
-        },
-        {
-            "emoji": "🧷",
-            "name": "safety pin"
-        },
-        {
-            "emoji": "🧹",
-            "name": "broom"
-        },
-        {
-            "emoji": "🧺",
-            "name": "basket"
-        },
-        {
-            "emoji": "🧻",
-            "name": "roll of paper"
-        },
-        {
-            "emoji": "🪣",
-            "name": "bucket"
-        },
-        {
-            "emoji": "🧼",
-            "name": "soap"
-        },
-        {
-            "emoji": "🫧",
-            "name": "bubbles"
-        },
-        {
-            "emoji": "🪥",
-            "name": "toothbrush"
-        },
-        {
-            "emoji": "🧽",
-            "name": "sponge"
-        },
-        {
-            "emoji": "🧯",
-            "name": "fire extinguisher"
-        },
-        {
-            "emoji": "🛒",
-            "name": "shopping cart"
-        },
-        {
-            "emoji": "🚬",
-            "name": "cigarette"
-        },
-        {
-            "emoji": "⚰️",
-            "name": "coffin"
-        },
-        {
-            "emoji": "🪦",
-            "name": "headstone"
-        },
-        {
-            "emoji": "⚱️",
-            "name": "funeral urn"
-        },
-        {
-            "emoji": "🧿",
-            "name": "nazar amulet"
-        },
-        {
-            "emoji": "🪬",
-            "name": "hamsa"
-        },
-        {
-            "emoji": "🗿",
-            "name": "moai"
-        },
-        {
-            "emoji": "🪧",
-            "name": "placard"
-        },
-        {
-            "emoji": "🪪",
-            "name": "identification card"
-        }
-    ],
-    "Symbols": [
-        {
-            "emoji": "🏧",
-            "name": "ATM sign"
-        },
-        {
-            "emoji": "🚮",
-            "name": "litter in bin sign"
-        },
-        {
-            "emoji": "🚰",
-            "name": "potable water"
-        },
-        {
-            "emoji": "♿",
-            "name": "wheelchair symbol"
-        },
-        {
-            "emoji": "🚹",
-            "name": "men’s room"
-        },
-        {
-            "emoji": "🚺",
-            "name": "women’s room"
-        },
-        {
-            "emoji": "🚻",
-            "name": "restroom"
-        },
-        {
-            "emoji": "🚼",
-            "name": "baby symbol"
-        },
-        {
-            "emoji": "🚾",
-            "name": "water closet"
-        },
-        {
-            "emoji": "🛂",
-            "name": "passport control"
-        },
-        {
-            "emoji": "🛃",
-            "name": "customs"
-        },
-        {
-            "emoji": "🛄",
-            "name": "baggage claim"
-        },
-        {
-            "emoji": "🛅",
-            "name": "left luggage"
-        },
-        {
-            "emoji": "⚠️",
-            "name": "warning"
-        },
-        {
-            "emoji": "🚸",
-            "name": "children crossing"
-        },
-        {
-            "emoji": "⛔",
-            "name": "no entry"
-        },
-        {
-            "emoji": "🚫",
-            "name": "prohibited"
-        },
-        {
-            "emoji": "🚳",
-            "name": "no bicycles"
-        },
-        {
-            "emoji": "🚭",
-            "name": "no smoking"
-        },
-        {
-            "emoji": "🚯",
-            "name": "no littering"
-        },
-        {
-            "emoji": "🚱",
-            "name": "non-potable water"
-        },
-        {
-            "emoji": "🚷",
-            "name": "no pedestrians"
-        },
-        {
-            "emoji": "📵",
-            "name": "no mobile phones"
-        },
-        {
-            "emoji": "🔞",
-            "name": "no one under eighteen"
-        },
-        {
-            "emoji": "☢️",
-            "name": "radioactive"
-        },
-        {
-            "emoji": "☣️",
-            "name": "biohazard"
-        },
-        {
-            "emoji": "⬆️",
-            "name": "up arrow"
-        },
-        {
-            "emoji": "↗️",
-            "name": "up-right arrow"
-        },
-        {
-            "emoji": "➡️",
-            "name": "right arrow"
-        },
-        {
-            "emoji": "↘️",
-            "name": "down-right arrow"
-        },
-        {
-            "emoji": "⬇️",
-            "name": "down arrow"
-        },
-        {
-            "emoji": "↙️",
-            "name": "down-left arrow"
-        },
-        {
-            "emoji": "⬅️",
-            "name": "left arrow"
-        },
-        {
-            "emoji": "↖️",
-            "name": "up-left arrow"
-        },
-        {
-            "emoji": "↕️",
-            "name": "up-down arrow"
-        },
-        {
-            "emoji": "↔️",
-            "name": "left-right arrow"
-        },
-        {
-            "emoji": "↩️",
-            "name": "right arrow curving left"
-        },
-        {
-            "emoji": "↪️",
-            "name": "left arrow curving right"
-        },
-        {
-            "emoji": "⤴️",
-            "name": "right arrow curving up"
-        },
-        {
-            "emoji": "⤵️",
-            "name": "right arrow curving down"
-        },
-        {
-            "emoji": "🔃",
-            "name": "clockwise vertical arrows"
-        },
-        {
-            "emoji": "🔄",
-            "name": "counterclockwise arrows button"
-        },
-        {
-            "emoji": "🔙",
-            "name": "BACK arrow"
-        },
-        {
-            "emoji": "🔚",
-            "name": "END arrow"
-        },
-        {
-            "emoji": "🔛",
-            "name": "ON! arrow"
-        },
-        {
-            "emoji": "🔜",
-            "name": "SOON arrow"
-        },
-        {
-            "emoji": "🔝",
-            "name": "TOP arrow"
-        },
-        {
-            "emoji": "🛐",
-            "name": "place of worship"
-        },
-        {
-            "emoji": "⚛️",
-            "name": "atom symbol"
-        },
-        {
-            "emoji": "🕉️",
-            "name": "om"
-        },
-        {
-            "emoji": "✡️",
-            "name": "star of David"
-        },
-        {
-            "emoji": "☸️",
-            "name": "wheel of dharma"
-        },
-        {
-            "emoji": "☯️",
-            "name": "yin yang"
-        },
-        {
-            "emoji": "✝️",
-            "name": "latin cross"
-        },
-        {
-            "emoji": "☦️",
-            "name": "orthodox cross"
-        },
-        {
-            "emoji": "☪️",
-            "name": "star and crescent"
-        },
-        {
-            "emoji": "☮️",
-            "name": "peace symbol"
-        },
-        {
-            "emoji": "🕎",
-            "name": "menorah"
-        },
-        {
-            "emoji": "🔯",
-            "name": "dotted six-pointed star"
-        },
-        {
-            "emoji": "🪯",
-            "name": "khanda"
-        },
-        {
-            "emoji": "♈",
-            "name": "Aries"
-        },
-        {
-            "emoji": "♉",
-            "name": "Taurus"
-        },
-        {
-            "emoji": "♊",
-            "name": "Gemini"
-        },
-        {
-            "emoji": "♋",
-            "name": "Cancer"
-        },
-        {
-            "emoji": "♌",
-            "name": "Leo"
-        },
-        {
-            "emoji": "♍",
-            "name": "Virgo"
-        },
-        {
-            "emoji": "♎",
-            "name": "Libra"
-        },
-        {
-            "emoji": "♏",
-            "name": "Scorpio"
-        },
-        {
-            "emoji": "♐",
-            "name": "Sagittarius"
-        },
-        {
-            "emoji": "♑",
-            "name": "Capricorn"
-        },
-        {
-            "emoji": "♒",
-            "name": "Aquarius"
-        },
-        {
-            "emoji": "♓",
-            "name": "Pisces"
-        },
-        {
-            "emoji": "⛎",
-            "name": "Ophiuchus"
-        },
-        {
-            "emoji": "🔀",
-            "name": "shuffle tracks button"
-        },
-        {
-            "emoji": "🔁",
-            "name": "repeat button"
-        },
-        {
-            "emoji": "🔂",
-            "name": "repeat single button"
-        },
-        {
-            "emoji": "▶️",
-            "name": "play button"
-        },
-        {
-            "emoji": "⏩",
-            "name": "fast-forward button"
-        },
-        {
-            "emoji": "⏭️",
-            "name": "next track button"
-        },
-        {
-            "emoji": "⏯️",
-            "name": "play or pause button"
-        },
-        {
-            "emoji": "◀️",
-            "name": "reverse button"
-        },
-        {
-            "emoji": "⏪",
-            "name": "fast reverse button"
-        },
-        {
-            "emoji": "⏮️",
-            "name": "last track button"
-        },
-        {
-            "emoji": "🔼",
-            "name": "upwards button"
-        },
-        {
-            "emoji": "⏫",
-            "name": "fast up button"
-        },
-        {
-            "emoji": "🔽",
-            "name": "downwards button"
-        },
-        {
-            "emoji": "⏬",
-            "name": "fast down button"
-        },
-        {
-            "emoji": "⏸️",
-            "name": "pause button"
-        },
-        {
-            "emoji": "⏹️",
-            "name": "stop button"
-        },
-        {
-            "emoji": "⏺️",
-            "name": "record button"
-        },
-        {
-            "emoji": "⏏️",
-            "name": "eject button"
-        },
-        {
-            "emoji": "🎦",
-            "name": "cinema"
-        },
-        {
-            "emoji": "🔅",
-            "name": "dim button"
-        },
-        {
-            "emoji": "🔆",
-            "name": "bright button"
-        },
-        {
-            "emoji": "📶",
-            "name": "antenna bars"
-        },
-        {
-            "emoji": "🛜",
-            "name": "wireless"
-        },
-        {
-            "emoji": "📳",
-            "name": "vibration mode"
-        },
-        {
-            "emoji": "📴",
-            "name": "mobile phone off"
-        },
-        {
-            "emoji": "♀️",
-            "name": "female sign"
-        },
-        {
-            "emoji": "♂️",
-            "name": "male sign"
-        },
-        {
-            "emoji": "⚧️",
-            "name": "transgender symbol"
-        },
-        {
-            "emoji": "✖️",
-            "name": "multiply"
-        },
-        {
-            "emoji": "➕",
-            "name": "plus"
-        },
-        {
-            "emoji": "➖",
-            "name": "minus"
-        },
-        {
-            "emoji": "➗",
-            "name": "divide"
-        },
-        {
-            "emoji": "🟰",
-            "name": "heavy equals sign"
-        },
-        {
-            "emoji": "♾️",
-            "name": "infinity"
-        },
-        {
-            "emoji": "‼️",
-            "name": "double exclamation mark"
-        },
-        {
-            "emoji": "⁉️",
-            "name": "exclamation question mark"
-        },
-        {
-            "emoji": "❓",
-            "name": "red question mark"
-        },
-        {
-            "emoji": "❔",
-            "name": "white question mark"
-        },
-        {
-            "emoji": "❕",
-            "name": "white exclamation mark"
-        },
-        {
-            "emoji": "❗",
-            "name": "red exclamation mark"
-        },
-        {
-            "emoji": "〰️",
-            "name": "wavy dash"
-        },
-        {
-            "emoji": "💱",
-            "name": "currency exchange"
-        },
-        {
-            "emoji": "💲",
-            "name": "heavy dollar sign"
-        },
-        {
-            "emoji": "⚕️",
-            "name": "medical symbol"
-        },
-        {
-            "emoji": "♻️",
-            "name": "recycling symbol"
-        },
-        {
-            "emoji": "⚜️",
-            "name": "fleur-de-lis"
-        },
-        {
-            "emoji": "🔱",
-            "name": "trident emblem"
-        },
-        {
-            "emoji": "📛",
-            "name": "name badge"
-        },
-        {
-            "emoji": "🔰",
-            "name": "Japanese symbol for beginner"
-        },
-        {
-            "emoji": "⭕",
-            "name": "hollow red circle"
-        },
-        {
-            "emoji": "✅",
-            "name": "check mark button"
-        },
-        {
-            "emoji": "☑️",
-            "name": "check box with check"
-        },
-        {
-            "emoji": "✔️",
-            "name": "check mark"
-        },
-        {
-            "emoji": "❌",
-            "name": "cross mark"
-        },
-        {
-            "emoji": "❎",
-            "name": "cross mark button"
-        },
-        {
-            "emoji": "➰",
-            "name": "curly loop"
-        },
-        {
-            "emoji": "➿",
-            "name": "double curly loop"
-        },
-        {
-            "emoji": "〽️",
-            "name": "part alternation mark"
-        },
-        {
-            "emoji": "✳️",
-            "name": "eight-spoked asterisk"
-        },
-        {
-            "emoji": "✴️",
-            "name": "eight-pointed star"
-        },
-        {
-            "emoji": "❇️",
-            "name": "sparkle"
-        },
-        {
-            "emoji": "©️",
-            "name": "copyright"
-        },
-        {
-            "emoji": "®️",
-            "name": "registered"
-        },
-        {
-            "emoji": "™️",
-            "name": "trade mark"
-        },
-        {
-            "emoji": "#️⃣",
-            "name": "keycap #"
-        },
-        {
-            "emoji": "*️⃣",
-            "name": "keycap *"
-        },
-        {
-            "emoji": "0️⃣",
-            "name": "keycap 0"
-        },
-        {
-            "emoji": "1️⃣",
-            "name": "keycap 1"
-        },
-        {
-            "emoji": "2️⃣",
-            "name": "keycap 2"
-        },
-        {
-            "emoji": "3️⃣",
-            "name": "keycap 3"
-        },
-        {
-            "emoji": "4️⃣",
-            "name": "keycap 4"
-        },
-        {
-            "emoji": "5️⃣",
-            "name": "keycap 5"
-        },
-        {
-            "emoji": "6️⃣",
-            "name": "keycap 6"
-        },
-        {
-            "emoji": "7️⃣",
-            "name": "keycap 7"
-        },
-        {
-            "emoji": "8️⃣",
-            "name": "keycap 8"
-        },
-        {
-            "emoji": "9️⃣",
-            "name": "keycap 9"
-        },
-        {
-            "emoji": "🔟",
-            "name": "keycap 10"
-        },
-        {
-            "emoji": "🔠",
-            "name": "input latin uppercase"
-        },
-        {
-            "emoji": "🔡",
-            "name": "input latin lowercase"
-        },
-        {
-            "emoji": "🔢",
-            "name": "input numbers"
-        },
-        {
-            "emoji": "🔣",
-            "name": "input symbols"
-        },
-        {
-            "emoji": "🔤",
-            "name": "input latin letters"
-        },
-        {
-            "emoji": "🅰️",
-            "name": "A button (blood type)"
-        },
-        {
-            "emoji": "🆎",
-            "name": "AB button (blood type)"
-        },
-        {
-            "emoji": "🅱️",
-            "name": "B button (blood type)"
-        },
-        {
-            "emoji": "🆑",
-            "name": "CL button"
-        },
-        {
-            "emoji": "🆒",
-            "name": "COOL button"
-        },
-        {
-            "emoji": "🆓",
-            "name": "FREE button"
-        },
-        {
-            "emoji": "ℹ️",
-            "name": "information"
-        },
-        {
-            "emoji": "🆔",
-            "name": "ID button"
-        },
-        {
-            "emoji": "Ⓜ️",
-            "name": "circled M"
-        },
-        {
-            "emoji": "🆕",
-            "name": "NEW button"
-        },
-        {
-            "emoji": "🆖",
-            "name": "NG button"
-        },
-        {
-            "emoji": "🅾️",
-            "name": "O button (blood type)"
-        },
-        {
-            "emoji": "🆗",
-            "name": "OK button"
-        },
-        {
-            "emoji": "🅿️",
-            "name": "P button"
-        },
-        {
-            "emoji": "🆘",
-            "name": "SOS button"
-        },
-        {
-            "emoji": "🆙",
-            "name": "UP! button"
-        },
-        {
-            "emoji": "🆚",
-            "name": "VS button"
-        },
-        {
-            "emoji": "🈁",
-            "name": "Japanese “here” button"
-        },
-        {
-            "emoji": "🈂️",
-            "name": "Japanese “service charge” button"
-        },
-        {
-            "emoji": "🈷️",
-            "name": "Japanese “monthly amount” button"
-        },
-        {
-            "emoji": "🈶",
-            "name": "Japanese “not free of charge” button"
-        },
-        {
-            "emoji": "🈯",
-            "name": "Japanese “reserved” button"
-        },
-        {
-            "emoji": "🉐",
-            "name": "Japanese “bargain” button"
-        },
-        {
-            "emoji": "🈹",
-            "name": "Japanese “discount” button"
-        },
-        {
-            "emoji": "🈚",
-            "name": "Japanese “free of charge” button"
-        },
-        {
-            "emoji": "🈲",
-            "name": "Japanese “prohibited” button"
-        },
-        {
-            "emoji": "🉑",
-            "name": "Japanese “acceptable” button"
-        },
-        {
-            "emoji": "🈸",
-            "name": "Japanese “application” button"
-        },
-        {
-            "emoji": "🈴",
-            "name": "Japanese “passing grade” button"
-        },
-        {
-            "emoji": "🈳",
-            "name": "Japanese “vacancy” button"
-        },
-        {
-            "emoji": "㊗️",
-            "name": "Japanese “congratulations” button"
-        },
-        {
-            "emoji": "㊙️",
-            "name": "Japanese “secret” button"
-        },
-        {
-            "emoji": "🈺",
-            "name": "Japanese “open for business” button"
-        },
-        {
-            "emoji": "🈵",
-            "name": "Japanese “no vacancy” button"
-        },
-        {
-            "emoji": "🔴",
-            "name": "red circle"
-        },
-        {
-            "emoji": "🟠",
-            "name": "orange circle"
-        },
-        {
-            "emoji": "🟡",
-            "name": "yellow circle"
-        },
-        {
-            "emoji": "🟢",
-            "name": "green circle"
-        },
-        {
-            "emoji": "🔵",
-            "name": "blue circle"
-        },
-        {
-            "emoji": "🟣",
-            "name": "purple circle"
-        },
-        {
-            "emoji": "🟤",
-            "name": "brown circle"
-        },
-        {
-            "emoji": "⚫",
-            "name": "black circle"
-        },
-        {
-            "emoji": "⚪",
-            "name": "white circle"
-        },
-        {
-            "emoji": "🟥",
-            "name": "red square"
-        },
-        {
-            "emoji": "🟧",
-            "name": "orange square"
-        },
-        {
-            "emoji": "🟨",
-            "name": "yellow square"
-        },
-        {
-            "emoji": "🟩",
-            "name": "green square"
-        },
-        {
-            "emoji": "🟦",
-            "name": "blue square"
-        },
-        {
-            "emoji": "🟪",
-            "name": "purple square"
-        },
-        {
-            "emoji": "🟫",
-            "name": "brown square"
-        },
-        {
-            "emoji": "⬛",
-            "name": "black large square"
-        },
-        {
-            "emoji": "⬜",
-            "name": "white large square"
-        },
-        {
-            "emoji": "◼️",
-            "name": "black medium square"
-        },
-        {
-            "emoji": "◻️",
-            "name": "white medium square"
-        },
-        {
-            "emoji": "◾",
-            "name": "black medium-small square"
-        },
-        {
-            "emoji": "◽",
-            "name": "white medium-small square"
-        },
-        {
-            "emoji": "▪️",
-            "name": "black small square"
-        },
-        {
-            "emoji": "▫️",
-            "name": "white small square"
-        },
-        {
-            "emoji": "🔶",
-            "name": "large orange diamond"
-        },
-        {
-            "emoji": "🔷",
-            "name": "large blue diamond"
-        },
-        {
-            "emoji": "🔸",
-            "name": "small orange diamond"
-        },
-        {
-            "emoji": "🔹",
-            "name": "small blue diamond"
-        },
-        {
-            "emoji": "🔺",
-            "name": "red triangle pointed up"
-        },
-        {
-            "emoji": "🔻",
-            "name": "red triangle pointed down"
-        },
-        {
-            "emoji": "💠",
-            "name": "diamond with a dot"
-        },
-        {
-            "emoji": "🔘",
-            "name": "radio button"
-        },
-        {
-            "emoji": "🔳",
-            "name": "white square button"
-        },
-        {
-            "emoji": "🔲",
-            "name": "black square button"
-        }
-    ],
-    "Flags": [
-        {
-            "emoji": "🏁",
-            "name": "chequered flag"
-        },
-        {
-            "emoji": "🚩",
-            "name": "triangular flag"
-        },
-        {
-            "emoji": "🎌",
-            "name": "crossed flags"
-        },
-        {
-            "emoji": "🏴",
-            "name": "black flag"
-        },
-        {
-            "emoji": "🏳️",
-            "name": "white flag"
-        },
-        {
-            "emoji": "🏳️‍🌈",
-            "name": "rainbow flag"
-        },
-        {
-            "emoji": "🏳️‍⚧️",
-            "name": "transgender flag"
-        },
-        {
-            "emoji": "🏴‍☠️",
-            "name": "pirate flag"
-        },
-        {
-            "emoji": "🇦🇨",
-            "name": "flag Ascension Island"
-        },
-        {
-            "emoji": "🇦🇩",
-            "name": "flag Andorra"
-        },
-        {
-            "emoji": "🇦🇪",
-            "name": "flag United Arab Emirates"
-        },
-        {
-            "emoji": "🇦🇫",
-            "name": "flag Afghanistan"
-        },
-        {
-            "emoji": "🇦🇬",
-            "name": "flag Antigua & Barbuda"
-        },
-        {
-            "emoji": "🇦🇮",
-            "name": "flag Anguilla"
-        },
-        {
-            "emoji": "🇦🇱",
-            "name": "flag Albania"
-        },
-        {
-            "emoji": "🇦🇲",
-            "name": "flag Armenia"
-        },
-        {
-            "emoji": "🇦🇴",
-            "name": "flag Angola"
-        },
-        {
-            "emoji": "🇦🇶",
-            "name": "flag Antarctica"
-        },
-        {
-            "emoji": "🇦🇷",
-            "name": "flag Argentina"
-        },
-        {
-            "emoji": "🇦🇸",
-            "name": "flag American Samoa"
-        },
-        {
-            "emoji": "🇦🇹",
-            "name": "flag Austria"
-        },
-        {
-            "emoji": "🇦🇺",
-            "name": "flag Australia"
-        },
-        {
-            "emoji": "🇦🇼",
-            "name": "flag Aruba"
-        },
-        {
-            "emoji": "🇦🇽",
-            "name": "flag Åland Islands"
-        },
-        {
-            "emoji": "🇦🇿",
-            "name": "flag Azerbaijan"
-        },
-        {
-            "emoji": "🇧🇦",
-            "name": "flag Bosnia & Herzegovina"
-        },
-        {
-            "emoji": "🇧🇧",
-            "name": "flag Barbados"
-        },
-        {
-            "emoji": "🇧🇩",
-            "name": "flag Bangladesh"
-        },
-        {
-            "emoji": "🇧🇪",
-            "name": "flag Belgium"
-        },
-        {
-            "emoji": "🇧🇫",
-            "name": "flag Burkina Faso"
-        },
-        {
-            "emoji": "🇧🇬",
-            "name": "flag Bulgaria"
-        },
-        {
-            "emoji": "🇧🇭",
-            "name": "flag Bahrain"
-        },
-        {
-            "emoji": "🇧🇮",
-            "name": "flag Burundi"
-        },
-        {
-            "emoji": "🇧🇯",
-            "name": "flag Benin"
-        },
-        {
-            "emoji": "🇧🇱",
-            "name": "flag St. Barthélemy"
-        },
-        {
-            "emoji": "🇧🇲",
-            "name": "flag Bermuda"
-        },
-        {
-            "emoji": "🇧🇳",
-            "name": "flag Brunei"
-        },
-        {
-            "emoji": "🇧🇴",
-            "name": "flag Bolivia"
-        },
-        {
-            "emoji": "🇧🇶",
-            "name": "flag Caribbean Netherlands"
-        },
-        {
-            "emoji": "🇧🇷",
-            "name": "flag Brazil"
-        },
-        {
-            "emoji": "🇧🇸",
-            "name": "flag Bahamas"
-        },
-        {
-            "emoji": "🇧🇹",
-            "name": "flag Bhutan"
-        },
-        {
-            "emoji": "🇧🇻",
-            "name": "flag Bouvet Island"
-        },
-        {
-            "emoji": "🇧🇼",
-            "name": "flag Botswana"
-        },
-        {
-            "emoji": "🇧🇾",
-            "name": "flag Belarus"
-        },
-        {
-            "emoji": "🇧🇿",
-            "name": "flag Belize"
-        },
-        {
-            "emoji": "🇨🇦",
-            "name": "flag Canada"
-        },
-        {
-            "emoji": "🇨🇨",
-            "name": "flag Cocos (Keeling) Islands"
-        },
-        {
-            "emoji": "🇨🇩",
-            "name": "flag Congo - Kinshasa"
-        },
-        {
-            "emoji": "🇨🇫",
-            "name": "flag Central African Republic"
-        },
-        {
-            "emoji": "🇨🇬",
-            "name": "flag Congo - Brazzaville"
-        },
-        {
-            "emoji": "🇨🇭",
-            "name": "flag Switzerland"
-        },
-        {
-            "emoji": "🇨🇮",
-            "name": "flag Côte d’Ivoire"
-        },
-        {
-            "emoji": "🇨🇰",
-            "name": "flag Cook Islands"
-        },
-        {
-            "emoji": "🇨🇱",
-            "name": "flag Chile"
-        },
-        {
-            "emoji": "🇨🇲",
-            "name": "flag Cameroon"
-        },
-        {
-            "emoji": "🇨🇳",
-            "name": "flag China"
-        },
-        {
-            "emoji": "🇨🇴",
-            "name": "flag Colombia"
-        },
-        {
-            "emoji": "🇨🇵",
-            "name": "flag Clipperton Island"
-        },
-        {
-            "emoji": "🇨🇷",
-            "name": "flag Costa Rica"
-        },
-        {
-            "emoji": "🇨🇺",
-            "name": "flag Cuba"
-        },
-        {
-            "emoji": "🇨🇻",
-            "name": "flag Cape Verde"
-        },
-        {
-            "emoji": "🇨🇼",
-            "name": "flag Curaçao"
-        },
-        {
-            "emoji": "🇨🇽",
-            "name": "flag Christmas Island"
-        },
-        {
-            "emoji": "🇨🇾",
-            "name": "flag Cyprus"
-        },
-        {
-            "emoji": "🇨🇿",
-            "name": "flag Czechia"
-        },
-        {
-            "emoji": "🇩🇪",
-            "name": "flag Germany"
-        },
-        {
-            "emoji": "🇩🇬",
-            "name": "flag Diego Garcia"
-        },
-        {
-            "emoji": "🇩🇯",
-            "name": "flag Djibouti"
-        },
-        {
-            "emoji": "🇩🇰",
-            "name": "flag Denmark"
-        },
-        {
-            "emoji": "🇩🇲",
-            "name": "flag Dominica"
-        },
-        {
-            "emoji": "🇩🇴",
-            "name": "flag Dominican Republic"
-        },
-        {
-            "emoji": "🇩🇿",
-            "name": "flag Algeria"
-        },
-        {
-            "emoji": "🇪🇦",
-            "name": "flag Ceuta & Melilla"
-        },
-        {
-            "emoji": "🇪🇨",
-            "name": "flag Ecuador"
-        },
-        {
-            "emoji": "🇪🇪",
-            "name": "flag Estonia"
-        },
-        {
-            "emoji": "🇪🇬",
-            "name": "flag Egypt"
-        },
-        {
-            "emoji": "🇪🇭",
-            "name": "flag Western Sahara"
-        },
-        {
-            "emoji": "🇪🇷",
-            "name": "flag Eritrea"
-        },
-        {
-            "emoji": "🇪🇸",
-            "name": "flag Spain"
-        },
-        {
-            "emoji": "🇪🇹",
-            "name": "flag Ethiopia"
-        },
-        {
-            "emoji": "🇪🇺",
-            "name": "flag European Union"
-        },
-        {
-            "emoji": "🇫🇮",
-            "name": "flag Finland"
-        },
-        {
-            "emoji": "🇫🇯",
-            "name": "flag Fiji"
-        },
-        {
-            "emoji": "🇫🇰",
-            "name": "flag Falkland Islands"
-        },
-        {
-            "emoji": "🇫🇲",
-            "name": "flag Micronesia"
-        },
-        {
-            "emoji": "🇫🇴",
-            "name": "flag Faroe Islands"
-        },
-        {
-            "emoji": "🇫🇷",
-            "name": "flag France"
-        },
-        {
-            "emoji": "🇬🇦",
-            "name": "flag Gabon"
-        },
-        {
-            "emoji": "🇬🇧",
-            "name": "flag United Kingdom"
-        },
-        {
-            "emoji": "🇬🇩",
-            "name": "flag Grenada"
-        },
-        {
-            "emoji": "🇬🇪",
-            "name": "flag Georgia"
-        },
-        {
-            "emoji": "🇬🇫",
-            "name": "flag French Guiana"
-        },
-        {
-            "emoji": "🇬🇬",
-            "name": "flag Guernsey"
-        },
-        {
-            "emoji": "🇬🇭",
-            "name": "flag Ghana"
-        },
-        {
-            "emoji": "🇬🇮",
-            "name": "flag Gibraltar"
-        },
-        {
-            "emoji": "🇬🇱",
-            "name": "flag Greenland"
-        },
-        {
-            "emoji": "🇬🇲",
-            "name": "flag Gambia"
-        },
-        {
-            "emoji": "🇬🇳",
-            "name": "flag Guinea"
-        },
-        {
-            "emoji": "🇬🇵",
-            "name": "flag Guadeloupe"
-        },
-        {
-            "emoji": "🇬🇶",
-            "name": "flag Equatorial Guinea"
-        },
-        {
-            "emoji": "🇬🇷",
-            "name": "flag Greece"
-        },
-        {
-            "emoji": "🇬🇸",
-            "name": "flag South Georgia & South Sandwich Islands"
-        },
-        {
-            "emoji": "🇬🇹",
-            "name": "flag Guatemala"
-        },
-        {
-            "emoji": "🇬🇺",
-            "name": "flag Guam"
-        },
-        {
-            "emoji": "🇬🇼",
-            "name": "flag Guinea-Bissau"
-        },
-        {
-            "emoji": "🇬🇾",
-            "name": "flag Guyana"
-        },
-        {
-            "emoji": "🇭🇰",
-            "name": "flag Hong Kong SAR China"
-        },
-        {
-            "emoji": "🇭🇲",
-            "name": "flag Heard & McDonald Islands"
-        },
-        {
-            "emoji": "🇭🇳",
-            "name": "flag Honduras"
-        },
-        {
-            "emoji": "🇭🇷",
-            "name": "flag Croatia"
-        },
-        {
-            "emoji": "🇭🇹",
-            "name": "flag Haiti"
-        },
-        {
-            "emoji": "🇭🇺",
-            "name": "flag Hungary"
-        },
-        {
-            "emoji": "🇮🇨",
-            "name": "flag Canary Islands"
-        },
-        {
-            "emoji": "🇮🇩",
-            "name": "flag Indonesia"
-        },
-        {
-            "emoji": "🇮🇪",
-            "name": "flag Ireland"
-        },
-        {
-            "emoji": "🇮🇱",
-            "name": "flag Israel"
-        },
-        {
-            "emoji": "🇮🇲",
-            "name": "flag Isle of Man"
-        },
-        {
-            "emoji": "🇮🇳",
-            "name": "flag India"
-        },
-        {
-            "emoji": "🇮🇴",
-            "name": "flag British Indian Ocean Territory"
-        },
-        {
-            "emoji": "🇮🇶",
-            "name": "flag Iraq"
-        },
-        {
-            "emoji": "🇮🇷",
-            "name": "flag Iran"
-        },
-        {
-            "emoji": "🇮🇸",
-            "name": "flag Iceland"
-        },
-        {
-            "emoji": "🇮🇹",
-            "name": "flag Italy"
-        },
-        {
-            "emoji": "🇯🇪",
-            "name": "flag Jersey"
-        },
-        {
-            "emoji": "🇯🇲",
-            "name": "flag Jamaica"
-        },
-        {
-            "emoji": "🇯🇴",
-            "name": "flag Jordan"
-        },
-        {
-            "emoji": "🇯🇵",
-            "name": "flag Japan"
-        },
-        {
-            "emoji": "🇰🇪",
-            "name": "flag Kenya"
-        },
-        {
-            "emoji": "🇰🇬",
-            "name": "flag Kyrgyzstan"
-        },
-        {
-            "emoji": "🇰🇭",
-            "name": "flag Cambodia"
-        },
-        {
-            "emoji": "🇰🇮",
-            "name": "flag Kiribati"
-        },
-        {
-            "emoji": "🇰🇲",
-            "name": "flag Comoros"
-        },
-        {
-            "emoji": "🇰🇳",
-            "name": "flag St. Kitts & Nevis"
-        },
-        {
-            "emoji": "🇰🇵",
-            "name": "flag North Korea"
-        },
-        {
-            "emoji": "🇰🇷",
-            "name": "flag South Korea"
-        },
-        {
-            "emoji": "🇰🇼",
-            "name": "flag Kuwait"
-        },
-        {
-            "emoji": "🇰🇾",
-            "name": "flag Cayman Islands"
-        },
-        {
-            "emoji": "🇰🇿",
-            "name": "flag Kazakhstan"
-        },
-        {
-            "emoji": "🇱🇦",
-            "name": "flag Laos"
-        },
-        {
-            "emoji": "🇱🇧",
-            "name": "flag Lebanon"
-        },
-        {
-            "emoji": "🇱🇨",
-            "name": "flag St. Lucia"
-        },
-        {
-            "emoji": "🇱🇮",
-            "name": "flag Liechtenstein"
-        },
-        {
-            "emoji": "🇱🇰",
-            "name": "flag Sri Lanka"
-        },
-        {
-            "emoji": "🇱🇷",
-            "name": "flag Liberia"
-        },
-        {
-            "emoji": "🇱🇸",
-            "name": "flag Lesotho"
-        },
-        {
-            "emoji": "🇱🇹",
-            "name": "flag Lithuania"
-        },
-        {
-            "emoji": "🇱🇺",
-            "name": "flag Luxembourg"
-        },
-        {
-            "emoji": "🇱🇻",
-            "name": "flag Latvia"
-        },
-        {
-            "emoji": "🇱🇾",
-            "name": "flag Libya"
-        },
-        {
-            "emoji": "🇲🇦",
-            "name": "flag Morocco"
-        },
-        {
-            "emoji": "🇲🇨",
-            "name": "flag Monaco"
-        },
-        {
-            "emoji": "🇲🇩",
-            "name": "flag Moldova"
-        },
-        {
-            "emoji": "🇲🇪",
-            "name": "flag Montenegro"
-        },
-        {
-            "emoji": "🇲🇫",
-            "name": "flag St. Martin"
-        },
-        {
-            "emoji": "🇲🇬",
-            "name": "flag Madagascar"
-        },
-        {
-            "emoji": "🇲🇭",
-            "name": "flag Marshall Islands"
-        },
-        {
-            "emoji": "🇲🇰",
-            "name": "flag North Macedonia"
-        },
-        {
-            "emoji": "🇲🇱",
-            "name": "flag Mali"
-        },
-        {
-            "emoji": "🇲🇲",
-            "name": "flag Myanmar (Burma)"
-        },
-        {
-            "emoji": "🇲🇳",
-            "name": "flag Mongolia"
-        },
-        {
-            "emoji": "🇲🇴",
-            "name": "flag Macao SAR China"
-        },
-        {
-            "emoji": "🇲🇵",
-            "name": "flag Northern Mariana Islands"
-        },
-        {
-            "emoji": "🇲🇶",
-            "name": "flag Martinique"
-        },
-        {
-            "emoji": "🇲🇷",
-            "name": "flag Mauritania"
-        },
-        {
-            "emoji": "🇲🇸",
-            "name": "flag Montserrat"
-        },
-        {
-            "emoji": "🇲🇹",
-            "name": "flag Malta"
-        },
-        {
-            "emoji": "🇲🇺",
-            "name": "flag Mauritius"
-        },
-        {
-            "emoji": "🇲🇻",
-            "name": "flag Maldives"
-        },
-        {
-            "emoji": "🇲🇼",
-            "name": "flag Malawi"
-        },
-        {
-            "emoji": "🇲🇽",
-            "name": "flag Mexico"
-        },
-        {
-            "emoji": "🇲🇾",
-            "name": "flag Malaysia"
-        },
-        {
-            "emoji": "🇲🇿",
-            "name": "flag Mozambique"
-        },
-        {
-            "emoji": "🇳🇦",
-            "name": "flag Namibia"
-        },
-        {
-            "emoji": "🇳🇨",
-            "name": "flag New Caledonia"
-        },
-        {
-            "emoji": "🇳🇪",
-            "name": "flag Niger"
-        },
-        {
-            "emoji": "🇳🇫",
-            "name": "flag Norfolk Island"
-        },
-        {
-            "emoji": "🇳🇬",
-            "name": "flag Nigeria"
-        },
-        {
-            "emoji": "🇳🇮",
-            "name": "flag Nicaragua"
-        },
-        {
-            "emoji": "🇳🇱",
-            "name": "flag Netherlands"
-        },
-        {
-            "emoji": "🇳🇴",
-            "name": "flag Norway"
-        },
-        {
-            "emoji": "🇳🇵",
-            "name": "flag Nepal"
-        },
-        {
-            "emoji": "🇳🇷",
-            "name": "flag Nauru"
-        },
-        {
-            "emoji": "🇳🇺",
-            "name": "flag Niue"
-        },
-        {
-            "emoji": "🇳🇿",
-            "name": "flag New Zealand"
-        },
-        {
-            "emoji": "🇴🇲",
-            "name": "flag Oman"
-        },
-        {
-            "emoji": "🇵🇦",
-            "name": "flag Panama"
-        },
-        {
-            "emoji": "🇵🇪",
-            "name": "flag Peru"
-        },
-        {
-            "emoji": "🇵🇫",
-            "name": "flag French Polynesia"
-        },
-        {
-            "emoji": "🇵🇬",
-            "name": "flag Papua New Guinea"
-        },
-        {
-            "emoji": "🇵🇭",
-            "name": "flag Philippines"
-        },
-        {
-            "emoji": "🇵🇰",
-            "name": "flag Pakistan"
-        },
-        {
-            "emoji": "🇵🇱",
-            "name": "flag Poland"
-        },
-        {
-            "emoji": "🇵🇲",
-            "name": "flag St. Pierre & Miquelon"
-        },
-        {
-            "emoji": "🇵🇳",
-            "name": "flag Pitcairn Islands"
-        },
-        {
-            "emoji": "🇵🇷",
-            "name": "flag Puerto Rico"
-        },
-        {
-            "emoji": "🇵🇸",
-            "name": "flag Palestinian Territories"
-        },
-        {
-            "emoji": "🇵🇹",
-            "name": "flag Portugal"
-        },
-        {
-            "emoji": "🇵🇼",
-            "name": "flag Palau"
-        },
-        {
-            "emoji": "🇵🇾",
-            "name": "flag Paraguay"
-        },
-        {
-            "emoji": "🇶🇦",
-            "name": "flag Qatar"
-        },
-        {
-            "emoji": "🇷🇪",
-            "name": "flag Réunion"
-        },
-        {
-            "emoji": "🇷🇴",
-            "name": "flag Romania"
-        },
-        {
-            "emoji": "🇷🇸",
-            "name": "flag Serbia"
-        },
-        {
-            "emoji": "🇷🇺",
-            "name": "flag Russia"
-        },
-        {
-            "emoji": "🇷🇼",
-            "name": "flag Rwanda"
-        },
-        {
-            "emoji": "🇸🇦",
-            "name": "flag Saudi Arabia"
-        },
-        {
-            "emoji": "🇸🇧",
-            "name": "flag Solomon Islands"
-        },
-        {
-            "emoji": "🇸🇨",
-            "name": "flag Seychelles"
-        },
-        {
-            "emoji": "🇸🇩",
-            "name": "flag Sudan"
-        },
-        {
-            "emoji": "🇸🇪",
-            "name": "flag Sweden"
-        },
-        {
-            "emoji": "🇸🇬",
-            "name": "flag Singapore"
-        },
-        {
-            "emoji": "🇸🇭",
-            "name": "flag St. Helena"
-        },
-        {
-            "emoji": "🇸🇮",
-            "name": "flag Slovenia"
-        },
-        {
-            "emoji": "🇸🇯",
-            "name": "flag Svalbard & Jan Mayen"
-        },
-        {
-            "emoji": "🇸🇰",
-            "name": "flag Slovakia"
-        },
-        {
-            "emoji": "🇸🇱",
-            "name": "flag Sierra Leone"
-        },
-        {
-            "emoji": "🇸🇲",
-            "name": "flag San Marino"
-        },
-        {
-            "emoji": "🇸🇳",
-            "name": "flag Senegal"
-        },
-        {
-            "emoji": "🇸🇴",
-            "name": "flag Somalia"
-        },
-        {
-            "emoji": "🇸🇷",
-            "name": "flag Suriname"
-        },
-        {
-            "emoji": "🇸🇸",
-            "name": "flag South Sudan"
-        },
-        {
-            "emoji": "🇸🇹",
-            "name": "flag São Tomé & Príncipe"
-        },
-        {
-            "emoji": "🇸🇻",
-            "name": "flag El Salvador"
-        },
-        {
-            "emoji": "🇸🇽",
-            "name": "flag Sint Maarten"
-        },
-        {
-            "emoji": "🇸🇾",
-            "name": "flag Syria"
-        },
-        {
-            "emoji": "🇸🇿",
-            "name": "flag Eswatini"
-        },
-        {
-            "emoji": "🇹🇦",
-            "name": "flag Tristan da Cunha"
-        },
-        {
-            "emoji": "🇹🇨",
-            "name": "flag Turks & Caicos Islands"
-        },
-        {
-            "emoji": "🇹🇩",
-            "name": "flag Chad"
-        },
-        {
-            "emoji": "🇹🇫",
-            "name": "flag French Southern Territories"
-        },
-        {
-            "emoji": "🇹🇬",
-            "name": "flag Togo"
-        },
-        {
-            "emoji": "🇹🇭",
-            "name": "flag Thailand"
-        },
-        {
-            "emoji": "🇹🇯",
-            "name": "flag Tajikistan"
-        },
-        {
-            "emoji": "🇹🇰",
-            "name": "flag Tokelau"
-        },
-        {
-            "emoji": "🇹🇱",
-            "name": "flag Timor-Leste"
-        },
-        {
-            "emoji": "🇹🇲",
-            "name": "flag Turkmenistan"
-        },
-        {
-            "emoji": "🇹🇳",
-            "name": "flag Tunisia"
-        },
-        {
-            "emoji": "🇹🇴",
-            "name": "flag Tonga"
-        },
-        {
-            "emoji": "🇹🇷",
-            "name": "flag Türkiye"
-        },
-        {
-            "emoji": "🇹🇹",
-            "name": "flag Trinidad & Tobago"
-        },
-        {
-            "emoji": "🇹🇻",
-            "name": "flag Tuvalu"
-        },
-        {
-            "emoji": "🇹🇼",
-            "name": "flag Taiwan"
-        },
-        {
-            "emoji": "🇹🇿",
-            "name": "flag Tanzania"
-        },
-        {
-            "emoji": "🇺🇦",
-            "name": "flag Ukraine"
-        },
-        {
-            "emoji": "🇺🇬",
-            "name": "flag Uganda"
-        },
-        {
-            "emoji": "🇺🇲",
-            "name": "flag U.S. Outlying Islands"
-        },
-        {
-            "emoji": "🇺🇳",
-            "name": "flag United Nations"
-        },
-        {
-            "emoji": "🇺🇸",
-            "name": "flag United States"
-        },
-        {
-            "emoji": "🇺🇾",
-            "name": "flag Uruguay"
-        },
-        {
-            "emoji": "🇺🇿",
-            "name": "flag Uzbekistan"
-        },
-        {
-            "emoji": "🇻🇦",
-            "name": "flag Vatican City"
-        },
-        {
-            "emoji": "🇻🇨",
-            "name": "flag St. Vincent & Grenadines"
-        },
-        {
-            "emoji": "🇻🇪",
-            "name": "flag Venezuela"
-        },
-        {
-            "emoji": "🇻🇬",
-            "name": "flag British Virgin Islands"
-        },
-        {
-            "emoji": "🇻🇮",
-            "name": "flag U.S. Virgin Islands"
-        },
-        {
-            "emoji": "🇻🇳",
-            "name": "flag Vietnam"
-        },
-        {
-            "emoji": "🇻🇺",
-            "name": "flag Vanuatu"
-        },
-        {
-            "emoji": "🇼🇫",
-            "name": "flag Wallis & Futuna"
-        },
-        {
-            "emoji": "🇼🇸",
-            "name": "flag Samoa"
-        },
-        {
-            "emoji": "🇽🇰",
-            "name": "flag Kosovo"
-        },
-        {
-            "emoji": "🇾🇪",
-            "name": "flag Yemen"
-        },
-        {
-            "emoji": "🇾🇹",
-            "name": "flag Mayotte"
-        },
-        {
-            "emoji": "🇿🇦",
-            "name": "flag South Africa"
-        },
-        {
-            "emoji": "🇿🇲",
-            "name": "flag Zambia"
-        },
-        {
-            "emoji": "🇿🇼",
-            "name": "flag Zimbabwe"
-        },
-        {
-            "emoji": "🏴󠁧󠁢󠁥󠁮󠁧󠁿",
-            "name": "flag England"
-        },
-        {
-            "emoji": "🏴󠁧󠁢󠁳󠁣󠁴󠁿",
-            "name": "flag Scotland"
-        },
-        {
-            "emoji": "🏴󠁧󠁢󠁷󠁬󠁳󠁿",
-            "name": "flag Wales"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/src/@angor/angor.provider.ts b/src/@angor/angor.provider.ts
index 27e6a58..e78028b 100644
--- a/src/@angor/angor.provider.ts
+++ b/src/@angor/angor.provider.ts
@@ -1,15 +1,3 @@
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import {
-    APP_INITIALIZER,
-    ENVIRONMENT_INITIALIZER,
-    EnvironmentProviders,
-    Provider,
-    importProvidersFrom,
-    inject,
-} from '@angular/core';
-import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import {
     ANGOR_MOCK_API_DEFAULT_DELAY,
     mockApiInterceptor,
@@ -25,6 +13,18 @@ import { AngorMediaWatcherService } from '@angor/services/media-watcher';
 import { AngorPlatformService } from '@angor/services/platform';
 import { AngorSplashScreenService } from '@angor/services/splash-screen';
 import { AngorUtilsService } from '@angor/services/utils';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import {
+    APP_INITIALIZER,
+    ENVIRONMENT_INITIALIZER,
+    EnvironmentProviders,
+    Provider,
+    importProvidersFrom,
+    inject,
+} from '@angular/core';
+import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 export type AngorProviderConfig = {
     mockApi?: {
@@ -40,10 +40,8 @@ export type AngorProviderConfig = {
 export const provideAngor = (
     config: AngorProviderConfig
 ): Array<Provider | EnvironmentProviders> => {
-
     const providers: Array<Provider | EnvironmentProviders> = [
         {
-
             provide: MATERIAL_SANITY_CHECKS,
             useValue: {
                 doctype: true,
@@ -52,7 +50,6 @@ export const provideAngor = (
             },
         },
         {
-
             provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
             useValue: {
                 appearance: 'fill',
@@ -103,7 +100,6 @@ export const provideAngor = (
         },
     ];
 
-
     if (config?.mockApi?.services) {
         providers.push(
             provideHttpClient(withInterceptors([mockApiInterceptor])),
@@ -116,6 +112,5 @@ export const provideAngor = (
         );
     }
 
-
     return providers;
 };
diff --git a/src/@angor/animations/defaults.ts b/src/@angor/animations/defaults.ts
index f08a551..3cd6c41 100644
--- a/src/@angor/animations/defaults.ts
+++ b/src/@angor/animations/defaults.ts
@@ -2,17 +2,17 @@
  * Defines animation curves for Angor.
  */
 export class AngorAnimationCurves {
-    static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)';      // Standard animation curve
-    static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)';  // Deceleration curve
-    static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)';    // Acceleration curve
-    static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)';         // Sharp curve
+    static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)'; // Standard animation curve
+    static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)'; // Deceleration curve
+    static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)'; // Acceleration curve
+    static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)'; // Sharp curve
 }
 
 /**
  * Defines animation durations for Angor.
  */
 export class AngorAnimationDurations {
-    static complex = '375ms';   // Duration for complex animations
-    static entering = '225ms';  // Duration for entering animations
-    static exiting = '195ms';   // Duration for exiting animations
+    static complex = '375ms'; // Duration for complex animations
+    static entering = '225ms'; // Duration for entering animations
+    static exiting = '195ms'; // Duration for exiting animations
 }
diff --git a/src/@angor/animations/expand-collapse.ts b/src/@angor/animations/expand-collapse.ts
index 15bf1eb..2d1b731 100644
--- a/src/@angor/animations/expand-collapse.ts
+++ b/src/@angor/animations/expand-collapse.ts
@@ -1,3 +1,7 @@
+import {
+    AngorAnimationCurves,
+    AngorAnimationDurations,
+} from '@angor/animations/defaults';
 import {
     animate,
     state,
@@ -5,10 +9,6 @@ import {
     transition,
     trigger,
 } from '@angular/animations';
-import {
-    AngorAnimationCurves,
-    AngorAnimationDurations,
-} from '@angor/animations/defaults';
 
 /**
  * Animation trigger for expand/collapse transitions
diff --git a/src/@angor/animations/fade.ts b/src/@angor/animations/fade.ts
index 8813db4..f2539ac 100644
--- a/src/@angor/animations/fade.ts
+++ b/src/@angor/animations/fade.ts
@@ -1,3 +1,7 @@
+import {
+    AngorAnimationCurves,
+    AngorAnimationDurations,
+} from '@angor/animations/defaults';
 import {
     animate,
     state,
@@ -5,10 +9,6 @@ import {
     transition,
     trigger,
 } from '@angular/animations';
-import {
-    AngorAnimationCurves,
-    AngorAnimationDurations,
-} from '@angor/animations/defaults';
 
 /**
  * Fade in animation trigger
diff --git a/src/@angor/animations/shake.ts b/src/@angor/animations/shake.ts
index a0c2d88..0b5e56e 100644
--- a/src/@angor/animations/shake.ts
+++ b/src/@angor/animations/shake.ts
@@ -21,15 +21,42 @@ const shake = trigger('shake', [
                 '{{timings}}',
                 keyframes([
                     style({ transform: 'translate3d(0, 0, 0)', offset: 0 }),
-                    style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.1 }),
-                    style({ transform: 'translate3d(10px, 0, 0)', offset: 0.2 }),
-                    style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.3 }),
-                    style({ transform: 'translate3d(10px, 0, 0)', offset: 0.4 }),
-                    style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.5 }),
-                    style({ transform: 'translate3d(10px, 0, 0)', offset: 0.6 }),
-                    style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.7 }),
-                    style({ transform: 'translate3d(10px, 0, 0)', offset: 0.8 }),
-                    style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.9 }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.1,
+                    }),
+                    style({
+                        transform: 'translate3d(10px, 0, 0)',
+                        offset: 0.2,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.3,
+                    }),
+                    style({
+                        transform: 'translate3d(10px, 0, 0)',
+                        offset: 0.4,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.5,
+                    }),
+                    style({
+                        transform: 'translate3d(10px, 0, 0)',
+                        offset: 0.6,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.7,
+                    }),
+                    style({
+                        transform: 'translate3d(10px, 0, 0)',
+                        offset: 0.8,
+                    }),
+                    style({
+                        transform: 'translate3d(-10px, 0, 0)',
+                        offset: 0.9,
+                    }),
                     style({ transform: 'translate3d(0, 0, 0)', offset: 1 }),
                 ])
             ),
diff --git a/src/@angor/animations/slide.ts b/src/@angor/animations/slide.ts
index 57b6222..da2fa89 100644
--- a/src/@angor/animations/slide.ts
+++ b/src/@angor/animations/slide.ts
@@ -1,3 +1,7 @@
+import {
+    AngorAnimationCurves,
+    AngorAnimationDurations,
+} from '@angor/animations/defaults';
 import {
     animate,
     state,
@@ -5,10 +9,6 @@ import {
     transition,
     trigger,
 } from '@angular/animations';
-import {
-    AngorAnimationCurves,
-    AngorAnimationDurations,
-} from '@angor/animations/defaults';
 
 /**
  * Slide in from top animation trigger
diff --git a/src/@angor/animations/zoom.ts b/src/@angor/animations/zoom.ts
index 1775f97..0203bdd 100644
--- a/src/@angor/animations/zoom.ts
+++ b/src/@angor/animations/zoom.ts
@@ -1,3 +1,7 @@
+import {
+    AngorAnimationCurves,
+    AngorAnimationDurations,
+} from '@angor/animations/defaults';
 import {
     animate,
     state,
@@ -5,10 +9,6 @@ import {
     transition,
     trigger,
 } from '@angular/animations';
-import {
-    AngorAnimationCurves,
-    AngorAnimationDurations,
-} from '@angor/animations/defaults';
 
 /**
  * Creates a reusable animation trigger with configurable parameters.
diff --git a/src/@angor/components/alert/alert.component.ts b/src/@angor/components/alert/alert.component.ts
index ea9ebec..a008e1d 100644
--- a/src/@angor/components/alert/alert.component.ts
+++ b/src/@angor/components/alert/alert.component.ts
@@ -1,3 +1,10 @@
+import { angorAnimations } from '@angor/animations';
+import { AngorAlertService } from '@angor/components/alert/alert.service';
+import {
+    AngorAlertAppearance,
+    AngorAlertType,
+} from '@angor/components/alert/alert.types';
+import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
     ChangeDetectionStrategy,
@@ -16,13 +23,6 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { angorAnimations } from '@angor/animations';
-import { AngorAlertService } from '@angor/components/alert/alert.service';
-import {
-    AngorAlertAppearance,
-    AngorAlertType,
-} from '@angor/components/alert/alert.types';
-import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import { Subject, filter, takeUntil } from 'rxjs';
 
 @Component({
@@ -86,16 +86,22 @@ export class AngorAlertComponent implements OnChanges, OnInit, OnDestroy {
      */
     ngOnChanges(changes: SimpleChanges): void {
         if ('dismissed' in changes) {
-            this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue);
+            this.dismissed = coerceBooleanProperty(
+                changes.dismissed.currentValue
+            );
             this._toggleDismiss(this.dismissed);
         }
 
         if ('dismissible' in changes) {
-            this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue);
+            this.dismissible = coerceBooleanProperty(
+                changes.dismissible.currentValue
+            );
         }
 
         if ('showIcon' in changes) {
-            this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue);
+            this.showIcon = coerceBooleanProperty(
+                changes.showIcon.currentValue
+            );
         }
     }
 
diff --git a/src/@angor/components/card/card.component.ts b/src/@angor/components/card/card.component.ts
index 9d981be..99e43f8 100644
--- a/src/@angor/components/card/card.component.ts
+++ b/src/@angor/components/card/card.component.ts
@@ -1,3 +1,5 @@
+import { angorAnimations } from '@angor/animations';
+import { AngorCardFace } from '@angor/components/card/card.types';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
     Component,
@@ -7,8 +9,6 @@ import {
     SimpleChanges,
     ViewEncapsulation,
 } from '@angular/core';
-import { angorAnimations } from '@angor/animations';
-import { AngorCardFace } from '@angor/components/card/card.types';
 
 @Component({
     selector: 'angor-card',
@@ -47,11 +47,15 @@ export class AngorCardComponent implements OnChanges {
      */
     ngOnChanges(changes: SimpleChanges): void {
         if ('expanded' in changes) {
-            this.expanded = coerceBooleanProperty(changes.expanded.currentValue);
+            this.expanded = coerceBooleanProperty(
+                changes.expanded.currentValue
+            );
         }
 
         if ('flippable' in changes) {
-            this.flippable = coerceBooleanProperty(changes.flippable.currentValue);
+            this.flippable = coerceBooleanProperty(
+                changes.flippable.currentValue
+            );
         }
     }
 }
diff --git a/src/@angor/components/drawer/drawer.component.ts b/src/@angor/components/drawer/drawer.component.ts
index 9eea79f..50aa7fa 100644
--- a/src/@angor/components/drawer/drawer.component.ts
+++ b/src/@angor/components/drawer/drawer.component.ts
@@ -1,3 +1,9 @@
+import { AngorDrawerService } from '@angor/components/drawer/drawer.service';
+import {
+    AngorDrawerMode,
+    AngorDrawerPosition,
+} from '@angor/components/drawer/drawer.types';
+import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import {
     animate,
     AnimationBuilder,
@@ -11,6 +17,7 @@ import {
     EventEmitter,
     HostBinding,
     HostListener,
+    inject,
     Input,
     OnChanges,
     OnDestroy,
@@ -19,14 +26,7 @@ import {
     Renderer2,
     SimpleChanges,
     ViewEncapsulation,
-    inject,
 } from '@angular/core';
-import { AngorDrawerService } from '@angor/components/drawer/drawer.service';
-import {
-    AngorDrawerMode,
-    AngorDrawerPosition,
-} from '@angor/components/drawer/drawer.types';
-import { AngorUtilsService } from '@angor/services/utils/utils.service';
 
 @Component({
     selector: 'angor-drawer',
@@ -56,7 +56,8 @@ export class AngorDrawerComponent implements OnChanges, OnInit, OnDestroy {
     @Output() readonly fixedChanged = new EventEmitter<boolean>();
     @Output() readonly modeChanged = new EventEmitter<AngorDrawerMode>();
     @Output() readonly openedChanged = new EventEmitter<boolean>();
-    @Output() readonly positionChanged = new EventEmitter<AngorDrawerPosition>();
+    @Output() readonly positionChanged =
+        new EventEmitter<AngorDrawerPosition>();
 
     private _animationsEnabled: boolean = false;
     private _hovered: boolean = false;
@@ -107,7 +108,11 @@ export class AngorDrawerComponent implements OnChanges, OnInit, OnDestroy {
                 this._hideOverlay();
             }
 
-            if (previousMode === 'side' && currentMode === 'over' && this.opened) {
+            if (
+                previousMode === 'side' &&
+                currentMode === 'over' &&
+                this.opened
+            ) {
                 this._showOverlay();
             }
 
@@ -125,7 +130,9 @@ export class AngorDrawerComponent implements OnChanges, OnInit, OnDestroy {
         }
 
         if ('transparentOverlay' in changes) {
-            this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue);
+            this.transparentOverlay = coerceBooleanProperty(
+                changes.transparentOverlay.currentValue
+            );
         }
     }
 
diff --git a/src/@angor/components/drawer/drawer.service.ts b/src/@angor/components/drawer/drawer.service.ts
index daa219b..a059da5 100644
--- a/src/@angor/components/drawer/drawer.service.ts
+++ b/src/@angor/components/drawer/drawer.service.ts
@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
 import { AngorDrawerComponent } from '@angor/components/drawer/drawer.component';
+import { Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class AngorDrawerService {
diff --git a/src/@angor/components/highlight/highlight.component.ts b/src/@angor/components/highlight/highlight.component.ts
index 0bf3b27..8aca97b 100644
--- a/src/@angor/components/highlight/highlight.component.ts
+++ b/src/@angor/components/highlight/highlight.component.ts
@@ -1,3 +1,4 @@
+import { AngorHighlightService } from '@angor/components/highlight/highlight.service';
 import { NgClass } from '@angular/common';
 import {
     AfterViewInit,
@@ -16,7 +17,6 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { AngorHighlightService } from '@angor/components/highlight/highlight.service';
 
 @Component({
     selector: 'textarea[angor-highlight]',
diff --git a/src/@angor/components/highlight/highlight.service.ts b/src/@angor/components/highlight/highlight.service.ts
index ddd6028..d1855f6 100644
--- a/src/@angor/components/highlight/highlight.service.ts
+++ b/src/@angor/components/highlight/highlight.service.ts
@@ -3,7 +3,6 @@ import hljs from 'highlight.js';
 
 @Injectable({ providedIn: 'root' })
 export class AngorHighlightService {
-
     /**
      * Highlights the provided code using the specified language.
      */
@@ -28,15 +27,17 @@ export class AngorHighlightService {
         }
 
         // Determine the smallest indentation
-        lines.filter(line => line.length).forEach((line, index) => {
-            if (index === 0) {
-                indentation = line.search(/\S|$/);
-            } else {
-                indentation = Math.min(line.search(/\S|$/), indentation);
-            }
-        });
+        lines
+            .filter((line) => line.length)
+            .forEach((line, index) => {
+                if (index === 0) {
+                    indentation = line.search(/\S|$/);
+                } else {
+                    indentation = Math.min(line.search(/\S|$/), indentation);
+                }
+            });
 
         // Remove extra indentation and return formatted code
-        return lines.map(line => line.substring(indentation)).join('\n');
+        return lines.map((line) => line.substring(indentation)).join('\n');
     }
 }
diff --git a/src/@angor/components/loading-bar/loading-bar.component.ts b/src/@angor/components/loading-bar/loading-bar.component.ts
index 19ca3ce..6bb806d 100644
--- a/src/@angor/components/loading-bar/loading-bar.component.ts
+++ b/src/@angor/components/loading-bar/loading-bar.component.ts
@@ -1,7 +1,16 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { AngorLoadingService } from '@angor/services/loading';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import {
+    Component,
+    inject,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    SimpleChanges,
+    ViewEncapsulation,
+} from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/masonry/masonry.component.ts b/src/@angor/components/masonry/masonry.component.ts
index f3a99cd..6b60e56 100644
--- a/src/@angor/components/masonry/masonry.component.ts
+++ b/src/@angor/components/masonry/masonry.component.ts
@@ -1,3 +1,4 @@
+import { angorAnimations } from '@angor/animations';
 import { NgTemplateOutlet } from '@angular/common';
 import {
     AfterViewInit,
@@ -8,7 +9,6 @@ import {
     TemplateRef,
     ViewEncapsulation,
 } from '@angular/core';
-import { angorAnimations } from '@angor/animations';
 
 @Component({
     selector: 'angor-masonry',
diff --git a/src/@angor/components/navigation/horizontal/components/basic/basic.component.ts b/src/@angor/components/navigation/horizontal/components/basic/basic.component.ts
index c92fad1..cda7d59 100644
--- a/src/@angor/components/navigation/horizontal/components/basic/basic.component.ts
+++ b/src/@angor/components/navigation/horizontal/components/basic/basic.component.ts
@@ -1,3 +1,7 @@
+import { AngorHorizontalNavigationComponent } from '@angor/components/navigation/horizontal/horizontal.component';
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -16,10 +20,6 @@ import {
     RouterLink,
     RouterLinkActive,
 } from '@angular/router';
-import { AngorHorizontalNavigationComponent } from '@angor/components/navigation/horizontal/horizontal.component';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
-import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
@@ -69,7 +69,7 @@ export class AngorHorizontalNavigationBasicItemComponent
         // "isActiveMatchOptions" or the equivalent form of
         // item's "exactMatch" option
         this.isActiveMatchOptions =
-            this.item.isActiveMatchOptions ?? this.item.exactMatch
+            (this.item.isActiveMatchOptions ?? this.item.exactMatch)
                 ? this._angorUtilsService.exactMatchOptions
                 : this._angorUtilsService.subsetMatchOptions;
 
diff --git a/src/@angor/components/navigation/horizontal/components/branch/branch.component.html b/src/@angor/components/navigation/horizontal/components/branch/branch.component.html
index 2dc5797..b6dc826 100644
--- a/src/@angor/components/navigation/horizontal/components/branch/branch.component.html
+++ b/src/@angor/components/navigation/horizontal/components/branch/branch.component.html
@@ -66,7 +66,10 @@
 
             <!-- Divider -->
             @if (item.type === 'divider') {
-                <div class="angor-horizontal-navigation-menu-item" mat-menu-item>
+                <div
+                    class="angor-horizontal-navigation-menu-item"
+                    mat-menu-item
+                >
                     <angor-horizontal-navigation-divider-item
                         [item]="item"
                         [name]="name"
diff --git a/src/@angor/components/navigation/horizontal/components/branch/branch.component.ts b/src/@angor/components/navigation/horizontal/components/branch/branch.component.ts
index 40e0cf4..6125ad7 100644
--- a/src/@angor/components/navigation/horizontal/components/branch/branch.component.ts
+++ b/src/@angor/components/navigation/horizontal/components/branch/branch.component.ts
@@ -1,3 +1,8 @@
+import { AngorHorizontalNavigationBasicItemComponent } from '@angor/components/navigation/horizontal/components/basic/basic.component';
+import { AngorHorizontalNavigationDividerItemComponent } from '@angor/components/navigation/horizontal/components/divider/divider.component';
+import { AngorHorizontalNavigationComponent } from '@angor/components/navigation/horizontal/horizontal.component';
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
@@ -14,11 +19,6 @@ import {
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenu, MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { AngorHorizontalNavigationBasicItemComponent } from '@angor/components/navigation/horizontal/components/basic/basic.component';
-import { AngorHorizontalNavigationDividerItemComponent } from '@angor/components/navigation/horizontal/components/divider/divider.component';
-import { AngorHorizontalNavigationComponent } from '@angor/components/navigation/horizontal/horizontal.component';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/navigation/horizontal/components/divider/divider.component.ts b/src/@angor/components/navigation/horizontal/components/divider/divider.component.ts
index ceb8a7c..612fd92 100644
--- a/src/@angor/components/navigation/horizontal/components/divider/divider.component.ts
+++ b/src/@angor/components/navigation/horizontal/components/divider/divider.component.ts
@@ -1,3 +1,6 @@
+import { AngorHorizontalNavigationComponent } from '@angor/components/navigation/horizontal/horizontal.component';
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
 import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -8,9 +11,6 @@ import {
     OnDestroy,
     OnInit,
 } from '@angular/core';
-import { AngorHorizontalNavigationComponent } from '@angor/components/navigation/horizontal/horizontal.component';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/navigation/horizontal/components/spacer/spacer.component.ts b/src/@angor/components/navigation/horizontal/components/spacer/spacer.component.ts
index 85f7023..fcf395e 100644
--- a/src/@angor/components/navigation/horizontal/components/spacer/spacer.component.ts
+++ b/src/@angor/components/navigation/horizontal/components/spacer/spacer.component.ts
@@ -1,3 +1,6 @@
+import { AngorHorizontalNavigationComponent } from '@angor/components/navigation/horizontal/horizontal.component';
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
 import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -8,9 +11,6 @@ import {
     OnDestroy,
     OnInit,
 } from '@angular/core';
-import { AngorHorizontalNavigationComponent } from '@angor/components/navigation/horizontal/horizontal.component';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/navigation/horizontal/horizontal.component.ts b/src/@angor/components/navigation/horizontal/horizontal.component.ts
index 1255ddf..704963b 100644
--- a/src/@angor/components/navigation/horizontal/horizontal.component.ts
+++ b/src/@angor/components/navigation/horizontal/horizontal.component.ts
@@ -1,3 +1,7 @@
+import { angorAnimations } from '@angor/animations';
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -10,10 +14,6 @@ import {
     ViewEncapsulation,
     inject,
 } from '@angular/core';
-import { angorAnimations } from '@angor/animations';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
-import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import { ReplaySubject, Subject } from 'rxjs';
 import { AngorHorizontalNavigationBasicItemComponent } from './components/basic/basic.component';
 import { AngorHorizontalNavigationBranchItemComponent } from './components/branch/branch.component';
diff --git a/src/@angor/components/navigation/navigation.service.ts b/src/@angor/components/navigation/navigation.service.ts
index 0d913fd..3b389be 100644
--- a/src/@angor/components/navigation/navigation.service.ts
+++ b/src/@angor/components/navigation/navigation.service.ts
@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
 import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class AngorNavigationService {
@@ -93,7 +93,10 @@ export class AngorNavigationService {
      * @param id
      * @param navigation
      */
-    getItem(id: string, navigation: AngorNavigationItem[]): AngorNavigationItem | null {
+    getItem(
+        id: string,
+        navigation: AngorNavigationItem[]
+    ): AngorNavigationItem | null {
         for (const item of navigation) {
             if (item.id === id) return item;
             if (item.children) {
diff --git a/src/@angor/components/navigation/navigation.types.ts b/src/@angor/components/navigation/navigation.types.ts
index c6c5733..9b07bb5 100644
--- a/src/@angor/components/navigation/navigation.types.ts
+++ b/src/@angor/components/navigation/navigation.types.ts
@@ -38,6 +38,10 @@ export interface AngorNavigationItem {
     meta?: any;
 }
 
-export type AngorVerticalNavigationAppearance = 'default' | 'compact' | 'dense' | 'thin';
+export type AngorVerticalNavigationAppearance =
+    | 'default'
+    | 'compact'
+    | 'dense'
+    | 'thin';
 export type AngorVerticalNavigationMode = 'over' | 'side';
 export type AngorVerticalNavigationPosition = 'left' | 'right';
diff --git a/src/@angor/components/navigation/vertical/components/aside/aside.component.ts b/src/@angor/components/navigation/vertical/components/aside/aside.component.ts
index aa4d225..8baa5c5 100644
--- a/src/@angor/components/navigation/vertical/components/aside/aside.component.ts
+++ b/src/@angor/components/navigation/vertical/components/aside/aside.component.ts
@@ -1,3 +1,11 @@
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { AngorVerticalNavigationBasicItemComponent } from '@angor/components/navigation/vertical/components/basic/basic.component';
+import { AngorVerticalNavigationCollapsableItemComponent } from '@angor/components/navigation/vertical/components/collapsable/collapsable.component';
+import { AngorVerticalNavigationDividerItemComponent } from '@angor/components/navigation/vertical/components/divider/divider.component';
+import { AngorVerticalNavigationGroupItemComponent } from '@angor/components/navigation/vertical/components/group/group.component';
+import { AngorVerticalNavigationSpacerItemComponent } from '@angor/components/navigation/vertical/components/spacer/spacer.component';
+import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass } from '@angular/common';
 import {
@@ -14,14 +22,6 @@ import {
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NavigationEnd, Router } from '@angular/router';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
-import { AngorVerticalNavigationBasicItemComponent } from '@angor/components/navigation/vertical/components/basic/basic.component';
-import { AngorVerticalNavigationCollapsableItemComponent } from '@angor/components/navigation/vertical/components/collapsable/collapsable.component';
-import { AngorVerticalNavigationDividerItemComponent } from '@angor/components/navigation/vertical/components/divider/divider.component';
-import { AngorVerticalNavigationGroupItemComponent } from '@angor/components/navigation/vertical/components/group/group.component';
-import { AngorVerticalNavigationSpacerItemComponent } from '@angor/components/navigation/vertical/components/spacer/spacer.component';
-import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { Subject, filter, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/navigation/vertical/components/basic/basic.component.ts b/src/@angor/components/navigation/vertical/components/basic/basic.component.ts
index ff009a1..861f581 100644
--- a/src/@angor/components/navigation/vertical/components/basic/basic.component.ts
+++ b/src/@angor/components/navigation/vertical/components/basic/basic.component.ts
@@ -1,3 +1,7 @@
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
+import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -15,10 +19,6 @@ import {
     RouterLink,
     RouterLinkActive,
 } from '@angular/router';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
-import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
-import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
@@ -67,7 +67,7 @@ export class AngorVerticalNavigationBasicItemComponent
         // "isActiveMatchOptions" or the equivalent form of
         // item's "exactMatch" option
         this.isActiveMatchOptions =
-            this.item.isActiveMatchOptions ?? this.item.exactMatch
+            (this.item.isActiveMatchOptions ?? this.item.exactMatch)
                 ? this._angorUtilsService.exactMatchOptions
                 : this._angorUtilsService.subsetMatchOptions;
 
diff --git a/src/@angor/components/navigation/vertical/components/collapsable/collapsable.component.ts b/src/@angor/components/navigation/vertical/components/collapsable/collapsable.component.ts
index 30cc679..e9b5ea6 100644
--- a/src/@angor/components/navigation/vertical/components/collapsable/collapsable.component.ts
+++ b/src/@angor/components/navigation/vertical/components/collapsable/collapsable.component.ts
@@ -1,3 +1,11 @@
+import { angorAnimations } from '@angor/animations';
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { AngorVerticalNavigationBasicItemComponent } from '@angor/components/navigation/vertical/components/basic/basic.component';
+import { AngorVerticalNavigationDividerItemComponent } from '@angor/components/navigation/vertical/components/divider/divider.component';
+import { AngorVerticalNavigationGroupItemComponent } from '@angor/components/navigation/vertical/components/group/group.component';
+import { AngorVerticalNavigationSpacerItemComponent } from '@angor/components/navigation/vertical/components/spacer/spacer.component';
+import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass } from '@angular/common';
 import {
@@ -14,14 +22,6 @@ import {
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NavigationEnd, Router } from '@angular/router';
-import { angorAnimations } from '@angor/animations';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
-import { AngorVerticalNavigationBasicItemComponent } from '@angor/components/navigation/vertical/components/basic/basic.component';
-import { AngorVerticalNavigationDividerItemComponent } from '@angor/components/navigation/vertical/components/divider/divider.component';
-import { AngorVerticalNavigationGroupItemComponent } from '@angor/components/navigation/vertical/components/group/group.component';
-import { AngorVerticalNavigationSpacerItemComponent } from '@angor/components/navigation/vertical/components/spacer/spacer.component';
-import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { Subject, filter, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/navigation/vertical/components/divider/divider.component.ts b/src/@angor/components/navigation/vertical/components/divider/divider.component.ts
index 8591090..daf17d3 100644
--- a/src/@angor/components/navigation/vertical/components/divider/divider.component.ts
+++ b/src/@angor/components/navigation/vertical/components/divider/divider.component.ts
@@ -1,3 +1,6 @@
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -8,9 +11,6 @@ import {
     OnDestroy,
     OnInit,
 } from '@angular/core';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
-import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/navigation/vertical/components/group/group.component.ts b/src/@angor/components/navigation/vertical/components/group/group.component.ts
index b71c62d..8fb8c8a 100644
--- a/src/@angor/components/navigation/vertical/components/group/group.component.ts
+++ b/src/@angor/components/navigation/vertical/components/group/group.component.ts
@@ -1,3 +1,10 @@
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { AngorVerticalNavigationBasicItemComponent } from '@angor/components/navigation/vertical/components/basic/basic.component';
+import { AngorVerticalNavigationCollapsableItemComponent } from '@angor/components/navigation/vertical/components/collapsable/collapsable.component';
+import { AngorVerticalNavigationDividerItemComponent } from '@angor/components/navigation/vertical/components/divider/divider.component';
+import { AngorVerticalNavigationSpacerItemComponent } from '@angor/components/navigation/vertical/components/spacer/spacer.component';
+import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass } from '@angular/common';
 import {
@@ -11,13 +18,6 @@ import {
     inject,
 } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
-import { AngorVerticalNavigationBasicItemComponent } from '@angor/components/navigation/vertical/components/basic/basic.component';
-import { AngorVerticalNavigationCollapsableItemComponent } from '@angor/components/navigation/vertical/components/collapsable/collapsable.component';
-import { AngorVerticalNavigationDividerItemComponent } from '@angor/components/navigation/vertical/components/divider/divider.component';
-import { AngorVerticalNavigationSpacerItemComponent } from '@angor/components/navigation/vertical/components/spacer/spacer.component';
-import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/navigation/vertical/components/spacer/spacer.component.ts b/src/@angor/components/navigation/vertical/components/spacer/spacer.component.ts
index b107ff1..225f93f 100644
--- a/src/@angor/components/navigation/vertical/components/spacer/spacer.component.ts
+++ b/src/@angor/components/navigation/vertical/components/spacer/spacer.component.ts
@@ -1,3 +1,6 @@
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
+import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -8,9 +11,6 @@ import {
     OnDestroy,
     OnInit,
 } from '@angular/core';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import { AngorNavigationItem } from '@angor/components/navigation/navigation.types';
-import { AngorVerticalNavigationComponent } from '@angor/components/navigation/vertical/vertical.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
diff --git a/src/@angor/components/navigation/vertical/vertical.component.html b/src/@angor/components/navigation/vertical/vertical.component.html
index ba31776..f9a906c 100644
--- a/src/@angor/components/navigation/vertical/vertical.component.html
+++ b/src/@angor/components/navigation/vertical/vertical.component.html
@@ -80,8 +80,6 @@
                 }
             }
         }
-
- 
     </div>
 
     <!-- Footer -->
diff --git a/src/@angor/components/navigation/vertical/vertical.component.ts b/src/@angor/components/navigation/vertical/vertical.component.ts
index 47e06fe..236f06a 100644
--- a/src/@angor/components/navigation/vertical/vertical.component.ts
+++ b/src/@angor/components/navigation/vertical/vertical.component.ts
@@ -1,3 +1,19 @@
+import { angorAnimations } from '@angor/animations';
+import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
+import {
+    AngorNavigationItem,
+    AngorVerticalNavigationAppearance,
+    AngorVerticalNavigationMode,
+    AngorVerticalNavigationPosition,
+} from '@angor/components/navigation/navigation.types';
+import { AngorVerticalNavigationAsideItemComponent } from '@angor/components/navigation/vertical/components/aside/aside.component';
+import { AngorVerticalNavigationBasicItemComponent } from '@angor/components/navigation/vertical/components/basic/basic.component';
+import { AngorVerticalNavigationCollapsableItemComponent } from '@angor/components/navigation/vertical/components/collapsable/collapsable.component';
+import { AngorVerticalNavigationDividerItemComponent } from '@angor/components/navigation/vertical/components/divider/divider.component';
+import { AngorVerticalNavigationGroupItemComponent } from '@angor/components/navigation/vertical/components/group/group.component';
+import { AngorVerticalNavigationSpacerItemComponent } from '@angor/components/navigation/vertical/components/spacer/spacer.component';
+import { AngorScrollbarDirective } from '@angor/directives/scrollbar/scrollbar.directive';
+import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import {
     animate,
     AnimationBuilder,
@@ -30,22 +46,6 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { angorAnimations } from '@angor/animations';
-import { AngorNavigationService } from '@angor/components/navigation/navigation.service';
-import {
-    AngorNavigationItem,
-    AngorVerticalNavigationAppearance,
-    AngorVerticalNavigationMode,
-    AngorVerticalNavigationPosition,
-} from '@angor/components/navigation/navigation.types';
-import { AngorVerticalNavigationAsideItemComponent } from '@angor/components/navigation/vertical/components/aside/aside.component';
-import { AngorVerticalNavigationBasicItemComponent } from '@angor/components/navigation/vertical/components/basic/basic.component';
-import { AngorVerticalNavigationCollapsableItemComponent } from '@angor/components/navigation/vertical/components/collapsable/collapsable.component';
-import { AngorVerticalNavigationDividerItemComponent } from '@angor/components/navigation/vertical/components/divider/divider.component';
-import { AngorVerticalNavigationGroupItemComponent } from '@angor/components/navigation/vertical/components/group/group.component';
-import { AngorVerticalNavigationSpacerItemComponent } from '@angor/components/navigation/vertical/components/spacer/spacer.component';
-import { AngorScrollbarDirective } from '@angor/directives/scrollbar/scrollbar.directive';
-import { AngorUtilsService } from '@angor/services/utils/utils.service';
 import {
     delay,
     filter,
diff --git a/src/@angor/directives/scroll-reset/scroll-reset.directive.ts b/src/@angor/directives/scroll-reset/scroll-reset.directive.ts
index ba91485..732bf34 100644
--- a/src/@angor/directives/scroll-reset/scroll-reset.directive.ts
+++ b/src/@angor/directives/scroll-reset/scroll-reset.directive.ts
@@ -21,7 +21,7 @@ export class AngorScrollResetDirective implements OnInit, OnDestroy {
     ngOnInit(): void {
         this._router.events
             .pipe(
-                filter(event => event instanceof NavigationEnd),
+                filter((event) => event instanceof NavigationEnd),
                 takeUntil(this._unsubscribeAll)
             )
             .subscribe(() => {
diff --git a/src/@angor/directives/scrollbar/scrollbar.directive.ts b/src/@angor/directives/scrollbar/scrollbar.directive.ts
index 4792f83..c1c7118 100644
--- a/src/@angor/directives/scrollbar/scrollbar.directive.ts
+++ b/src/@angor/directives/scrollbar/scrollbar.directive.ts
@@ -1,3 +1,7 @@
+import {
+    ScrollbarGeometry,
+    ScrollbarPosition,
+} from '@angor/directives/scrollbar/scrollbar.types';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
 import {
@@ -10,10 +14,6 @@ import {
     SimpleChanges,
     inject,
 } from '@angular/core';
-import {
-    ScrollbarGeometry,
-    ScrollbarPosition,
-} from '@angor/directives/scrollbar/scrollbar.types';
 import { merge } from 'lodash-es';
 import PerfectScrollbar from 'perfect-scrollbar';
 import { Subject, debounceTime, fromEvent, takeUntil } from 'rxjs';
@@ -47,12 +47,20 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
 
     ngOnChanges(changes: SimpleChanges): void {
         if ('angorScrollbar' in changes) {
-            this.angorScrollbar = coerceBooleanProperty(changes.angorScrollbar.currentValue);
-            this.angorScrollbar ? this._initScrollbar() : this._destroyScrollbar();
+            this.angorScrollbar = coerceBooleanProperty(
+                changes.angorScrollbar.currentValue
+            );
+            this.angorScrollbar
+                ? this._initScrollbar()
+                : this._destroyScrollbar();
         }
 
         if ('angorScrollbarOptions' in changes) {
-            this._options = merge({}, this._options, changes.angorScrollbarOptions.currentValue);
+            this._options = merge(
+                {},
+                this._options,
+                changes.angorScrollbarOptions.currentValue
+            );
             this._reinitializeScrollbar();
         }
     }
@@ -92,7 +100,10 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
 
     position(absolute: boolean = false): ScrollbarPosition {
         if (!absolute && this._ps) {
-            return new ScrollbarPosition(this._ps.reach.x || 0, this._ps.reach.y || 0);
+            return new ScrollbarPosition(
+                this._ps.reach.x || 0,
+                this._ps.reach.y || 0
+            );
         } else {
             return new ScrollbarPosition(
                 this._elementRef.nativeElement.scrollLeft,
@@ -115,7 +126,6 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
         }
     }
 
-
     scrollToX(x: number, speed?: number): void {
         this.animateScrolling('scrollLeft', x, speed);
     }
@@ -129,7 +139,9 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
     }
 
     scrollToBottom(offset: number = 0, speed?: number): void {
-        const top = this._elementRef.nativeElement.scrollHeight - this._elementRef.nativeElement.clientHeight;
+        const top =
+            this._elementRef.nativeElement.scrollHeight -
+            this._elementRef.nativeElement.clientHeight;
         this.animateScrolling('scrollTop', top - offset, speed);
     }
 
@@ -138,7 +150,9 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
     }
 
     scrollToRight(offset: number = 0, speed?: number): void {
-        const left = this._elementRef.nativeElement.scrollWidth - this._elementRef.nativeElement.clientWidth;
+        const left =
+            this._elementRef.nativeElement.scrollWidth -
+            this._elementRef.nativeElement.clientWidth;
         this.animateScrolling('scrollLeft', left - offset, speed);
     }
 
@@ -152,14 +166,29 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
         if (!element) return;
 
         const elementPos = element.getBoundingClientRect();
-        const scrollerPos = this._elementRef.nativeElement.getBoundingClientRect();
+        const scrollerPos =
+            this._elementRef.nativeElement.getBoundingClientRect();
 
         if (this._elementRef.nativeElement.classList.contains('ps--active-x')) {
-            this._scrollToInAxis(elementPos.left, scrollerPos.left, 'scrollLeft', offset, ignoreVisible, speed);
+            this._scrollToInAxis(
+                elementPos.left,
+                scrollerPos.left,
+                'scrollLeft',
+                offset,
+                ignoreVisible,
+                speed
+            );
         }
 
         if (this._elementRef.nativeElement.classList.contains('ps--active-y')) {
-            this._scrollToInAxis(elementPos.top, scrollerPos.top, 'scrollTop', offset, ignoreVisible, speed);
+            this._scrollToInAxis(
+                elementPos.top,
+                scrollerPos.top,
+                'scrollTop',
+                offset,
+                ignoreVisible,
+                speed
+            );
         }
     }
 
@@ -176,8 +205,16 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
     }
 
     private _initScrollbar(): void {
-        if (this._ps || this._platform.ANDROID || this._platform.IOS || !this._platform.isBrowser) return;
-        this._ps = new PerfectScrollbar(this._elementRef.nativeElement, { ...this._options });
+        if (
+            this._ps ||
+            this._platform.ANDROID ||
+            this._platform.IOS ||
+            !this._platform.isBrowser
+        )
+            return;
+        this._ps = new PerfectScrollbar(this._elementRef.nativeElement, {
+            ...this._options,
+        });
     }
 
     private _destroyScrollbar(): void {
@@ -198,7 +235,8 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
         ignoreVisible: boolean,
         speed?: number
     ): void {
-        if (ignoreVisible && elementPos <= scrollerPos - Math.abs(offset)) return;
+        if (ignoreVisible && elementPos <= scrollerPos - Math.abs(offset))
+            return;
 
         const currentPos = this._elementRef.nativeElement[target];
         const position = elementPos - scrollerPos + currentPos;
@@ -213,7 +251,9 @@ export class AngorScrollbarDirective implements OnChanges, OnInit, OnDestroy {
 
         const step = (newTimestamp: number) => {
             scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
-            const newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
+            const newValue = Math.round(
+                value + cosParameter + cosParameter * Math.cos(scrollCount)
+            );
 
             if (this._elementRef.nativeElement[target] === oldValue) {
                 if (scrollCount >= Math.PI) {
diff --git a/src/@angor/lib/mock-api/mock-api.interceptor.ts b/src/@angor/lib/mock-api/mock-api.interceptor.ts
index ca5a2c0..371718e 100644
--- a/src/@angor/lib/mock-api/mock-api.interceptor.ts
+++ b/src/@angor/lib/mock-api/mock-api.interceptor.ts
@@ -1,3 +1,5 @@
+import { ANGOR_MOCK_API_DEFAULT_DELAY } from '@angor/lib/mock-api/mock-api.constants';
+import { AngorMockApiService } from '@angor/lib/mock-api/mock-api.service';
 import {
     HttpErrorResponse,
     HttpEvent,
@@ -6,8 +8,6 @@ import {
     HttpResponse,
 } from '@angular/common/http';
 import { inject } from '@angular/core';
-import { ANGOR_MOCK_API_DEFAULT_DELAY } from '@angor/lib/mock-api/mock-api.constants';
-import { AngorMockApiService } from '@angor/lib/mock-api/mock-api.service';
 import { Observable, delay, of, switchMap, throwError } from 'rxjs';
 import { AngorMockApiMethods } from './mock-api.types';
 
@@ -43,11 +43,14 @@ export const mockApiInterceptor = (
         switchMap((response) => {
             // If no response is returned, generate a 404 error
             if (!response) {
-                return throwError(() => new HttpErrorResponse({
-                    error: 'NOT FOUND',
-                    status: 404,
-                    statusText: 'NOT FOUND',
-                }));
+                return throwError(
+                    () =>
+                        new HttpErrorResponse({
+                            error: 'NOT FOUND',
+                            status: 404,
+                            statusText: 'NOT FOUND',
+                        })
+                );
             }
 
             // Parse the response data (status and body)
@@ -58,19 +61,24 @@ export const mockApiInterceptor = (
 
             // If status code is between 200 and 300, return a successful response
             if (data.status >= 200 && data.status < 300) {
-                return of(new HttpResponse({
-                    body: data.body,
-                    status: data.status,
-                    statusText: 'OK',
-                }));
+                return of(
+                    new HttpResponse({
+                        body: data.body,
+                        status: data.status,
+                        statusText: 'OK',
+                    })
+                );
             }
 
             // For other status codes, throw an error response
-            return throwError(() => new HttpErrorResponse({
-                error: data.body?.error,
-                status: data.status,
-                statusText: 'ERROR',
-            }));
+            return throwError(
+                () =>
+                    new HttpErrorResponse({
+                        error: data.body?.error,
+                        status: data.status,
+                        statusText: 'ERROR',
+                    })
+            );
         })
     );
 };
diff --git a/src/@angor/lib/mock-api/mock-api.request-handler.ts b/src/@angor/lib/mock-api/mock-api.request-handler.ts
index fed2e4c..1534082 100644
--- a/src/@angor/lib/mock-api/mock-api.request-handler.ts
+++ b/src/@angor/lib/mock-api/mock-api.request-handler.ts
@@ -1,5 +1,5 @@
-import { HttpRequest } from '@angular/common/http';
 import { AngorMockApiReplyCallback } from '@angor/lib/mock-api/mock-api.types';
+import { HttpRequest } from '@angular/common/http';
 import { Observable, of, take, throwError } from 'rxjs';
 
 export class AngorMockApiHandler {
@@ -17,7 +17,10 @@ export class AngorMockApiHandler {
      * @param url - The URL for the mock API handler
      * @param delay - Optional delay for the response
      */
-    constructor(public url: string, public delay?: number) {}
+    constructor(
+        public url: string,
+        public delay?: number
+    ) {}
 
     /**
      * Getter for the response observable.
@@ -27,12 +30,16 @@ export class AngorMockApiHandler {
     get response(): Observable<any> {
         // Check if the execution limit has been reached
         if (this._replyCount > 0 && this._replyCount <= this._replied) {
-            return throwError(() => new Error('Execution limit has been reached!'));
+            return throwError(
+                () => new Error('Execution limit has been reached!')
+            );
         }
 
         // Ensure the response callback exists
         if (!this._reply) {
-            return throwError(() => new Error('Response callback function does not exist!'));
+            return throwError(
+                () => new Error('Response callback function does not exist!')
+            );
         }
 
         // Ensure the request exists
diff --git a/src/@angor/lib/mock-api/mock-api.service.ts b/src/@angor/lib/mock-api/mock-api.service.ts
index a74c081..d4e2189 100644
--- a/src/@angor/lib/mock-api/mock-api.service.ts
+++ b/src/@angor/lib/mock-api/mock-api.service.ts
@@ -1,11 +1,14 @@
-import { Injectable } from '@angular/core';
 import { AngorMockApiHandler } from '@angor/lib/mock-api/mock-api.request-handler';
 import { AngorMockApiMethods } from '@angor/lib/mock-api/mock-api.types';
-import { compact, fromPairs } from 'lodash-es';
+import { Injectable } from '@angular/core';
+import { fromPairs } from 'lodash-es';
 
 @Injectable({ providedIn: 'root' })
 export class AngorMockApiService {
-    private readonly _handlers: Record<AngorMockApiMethods, Map<string, AngorMockApiHandler>> = {
+    private readonly _handlers: Record<
+        AngorMockApiMethods,
+        Map<string, AngorMockApiHandler>
+    > = {
         get: new Map<string, AngorMockApiHandler>(),
         post: new Map<string, AngorMockApiHandler>(),
         patch: new Map<string, AngorMockApiHandler>(),
@@ -26,24 +29,36 @@ export class AngorMockApiService {
     findHandler(
         method: AngorMockApiMethods,
         url: string
-    ): { handler: AngorMockApiHandler | undefined; urlParams: Record<string, string> } {
-        const matchingHandler = { handler: undefined, urlParams: {} as Record<string, string> };
+    ): {
+        handler: AngorMockApiHandler | undefined;
+        urlParams: Record<string, string>;
+    } {
+        const matchingHandler = {
+            handler: undefined,
+            urlParams: {} as Record<string, string>,
+        };
         const urlParts = url.split('/');
-        const handlers = this._handlers[method.toLowerCase() as AngorMockApiMethods];
+        const handlers =
+            this._handlers[method.toLowerCase() as AngorMockApiMethods];
 
         for (const [handlerUrl, handler] of handlers) {
             const handlerUrlParts = handlerUrl.split('/');
 
             if (urlParts.length === handlerUrlParts.length) {
-                const matches = handlerUrlParts.every((part, index) =>
-                    part.startsWith(':') || part === urlParts[index]
+                const matches = handlerUrlParts.every(
+                    (part, index) =>
+                        part.startsWith(':') || part === urlParts[index]
                 );
 
                 if (matches) {
                     matchingHandler.handler = handler;
                     matchingHandler.urlParams = fromPairs(
                         handlerUrlParts
-                            .map((part, index) => (part.startsWith(':') ? [part.substring(1), urlParts[index]] : undefined))
+                            .map((part, index) =>
+                                part.startsWith(':')
+                                    ? [part.substring(1), urlParts[index]]
+                                    : undefined
+                            )
                             .filter(Boolean)
                     );
                     break;
@@ -150,7 +165,11 @@ export class AngorMockApiService {
      * @param delay - (Optional) Delay for the response in milliseconds
      * @returns An instance of AngorMockApiHandler
      */
-    private _registerHandler(method: AngorMockApiMethods, url: string, delay?: number): AngorMockApiHandler {
+    private _registerHandler(
+        method: AngorMockApiMethods,
+        url: string,
+        delay?: number
+    ): AngorMockApiHandler {
         const handler = new AngorMockApiHandler(url, delay);
         this._handlers[method].set(url, handler);
         return handler;
diff --git a/src/@angor/pipes/find-by-key/find-by-key.pipe.ts b/src/@angor/pipes/find-by-key/find-by-key.pipe.ts
index 44ba391..4885afe 100644
--- a/src/@angor/pipes/find-by-key/find-by-key.pipe.ts
+++ b/src/@angor/pipes/find-by-key/find-by-key.pipe.ts
@@ -18,7 +18,11 @@ export class AngorFindByKeyPipe implements PipeTransform {
      * @param source The array of objects to search within.
      * @returns A single object if `value` is a string, or an array of objects if `value` is an array.
      */
-    transform(value: string | string[], key: string, source: any[]): any | any[] {
+    transform(
+        value: string | string[],
+        key: string,
+        source: any[]
+    ): any | any[] {
         // If value is an array of strings, map each to its corresponding object in the source.
         if (Array.isArray(value)) {
             return value.map((item) =>
diff --git a/src/@angor/services/config/config.service.ts b/src/@angor/services/config/config.service.ts
index 4199db8..b6991bf 100644
--- a/src/@angor/services/config/config.service.ts
+++ b/src/@angor/services/config/config.service.ts
@@ -1,12 +1,14 @@
-import { inject, Injectable } from '@angular/core';
 import { ANGOR_CONFIG } from '@angor/services/config/config.constants';
+import { inject, Injectable } from '@angular/core';
 import { merge } from 'lodash-es';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class AngorConfigService {
     private readonly _defaultConfig = inject(ANGOR_CONFIG);
-    private readonly _configSubject = new BehaviorSubject<any>(this._defaultConfig);
+    private readonly _configSubject = new BehaviorSubject<any>(
+        this._defaultConfig
+    );
 
     /**
      * Getter for config as an Observable.
diff --git a/src/@angor/services/config/config.types.ts b/src/@angor/services/config/config.types.ts
index 5eda7b0..eafc614 100644
--- a/src/@angor/services/config/config.types.ts
+++ b/src/@angor/services/config/config.types.ts
@@ -9,9 +9,9 @@ export type Themes = Array<{ id: string; name: string }>;
  * This ensures consistency when defining or updating app settings.
  */
 export interface AngorConfig {
-    layout: string;        // Layout type (e.g., 'vertical', 'horizontal')
-    scheme: Scheme;        // Color scheme: 'auto', 'dark', or 'light'
-    screens: Screens;      // Screen breakpoints, e.g., { 'xs': '600px', ... }
-    theme: Theme;          // Active theme identifier, e.g., 'theme-default'
-    themes: Themes;        // List of available themes, each with an id and name
+    layout: string; // Layout type (e.g., 'vertical', 'horizontal')
+    scheme: Scheme; // Color scheme: 'auto', 'dark', or 'light'
+    screens: Screens; // Screen breakpoints, e.g., { 'xs': '600px', ... }
+    theme: Theme; // Active theme identifier, e.g., 'theme-default'
+    themes: Themes; // List of available themes, each with an id and name
 }
diff --git a/src/@angor/services/confirmation/confirmation.service.ts b/src/@angor/services/confirmation/confirmation.service.ts
index c48c2c2..72b1fc0 100644
--- a/src/@angor/services/confirmation/confirmation.service.ts
+++ b/src/@angor/services/confirmation/confirmation.service.ts
@@ -1,7 +1,7 @@
-import { inject, Injectable } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { AngorConfirmationConfig } from '@angor/services/confirmation/confirmation.types';
 import { AngorConfirmationDialogComponent } from '@angor/services/confirmation/dialog/dialog.component';
+import { inject, Injectable } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { merge } from 'lodash-es';
 
 @Injectable({ providedIn: 'root' })
diff --git a/src/@angor/services/confirmation/dialog/dialog.component.ts b/src/@angor/services/confirmation/dialog/dialog.component.ts
index 455a491..51dc48c 100644
--- a/src/@angor/services/confirmation/dialog/dialog.component.ts
+++ b/src/@angor/services/confirmation/dialog/dialog.component.ts
@@ -1,9 +1,9 @@
+import { AngorConfirmationConfig } from '@angor/services/confirmation/confirmation.types';
 import { NgClass } from '@angular/common';
 import { Component, ViewEncapsulation, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { AngorConfirmationConfig } from '@angor/services/confirmation/confirmation.types';
 
 @Component({
     selector: 'angor-confirmation-dialog',
diff --git a/src/@angor/services/loading/loading.interceptor.ts b/src/@angor/services/loading/loading.interceptor.ts
index c715411..4407b26 100644
--- a/src/@angor/services/loading/loading.interceptor.ts
+++ b/src/@angor/services/loading/loading.interceptor.ts
@@ -1,6 +1,6 @@
+import { AngorLoadingService } from '@angor/services/loading/loading.service';
 import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
 import { inject } from '@angular/core';
-import { AngorLoadingService } from '@angor/services/loading/loading.service';
 import { Observable, finalize, take } from 'rxjs';
 
 export const angorLoadingInterceptor = (
diff --git a/src/@angor/services/media-watcher/media-watcher.service.ts b/src/@angor/services/media-watcher/media-watcher.service.ts
index 8e14c95..ebd4181 100644
--- a/src/@angor/services/media-watcher/media-watcher.service.ts
+++ b/src/@angor/services/media-watcher/media-watcher.service.ts
@@ -1,6 +1,6 @@
+import { AngorConfigService } from '@angor/services/config';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Injectable, inject } from '@angular/core';
-import { AngorConfigService } from '@angor/services/config';
 import { fromPairs } from 'lodash-es';
 import { Observable, ReplaySubject, map, switchMap } from 'rxjs';
 
diff --git a/src/@angor/styles/components/example-viewer.scss b/src/@angor/styles/components/example-viewer.scss
index 157feb3..fa1c4ff 100644
--- a/src/@angor/styles/components/example-viewer.scss
+++ b/src/@angor/styles/components/example-viewer.scss
@@ -1,6 +1,3 @@
-/* ----------------------------------------------------------------------------------------------------- */
-/*  @ Example viewer
-/* ----------------------------------------------------------------------------------------------------- */
 .example-viewer {
     display: flex;
     flex-direction: column;
diff --git a/src/@angor/styles/themes.scss b/src/@angor/styles/themes.scss
index 24eaa12..50972f1 100644
--- a/src/@angor/styles/themes.scss
+++ b/src/@angor/styles/themes.scss
@@ -80,7 +80,6 @@ $dark-base: (
     ),
 );
 
-
 /* Include the core Angular Material styles */
 @include mat.core();
 
diff --git a/src/@angor/tailwind/plugins/theming.js b/src/@angor/tailwind/plugins/theming.js
index fd1d743..0cac64f 100644
--- a/src/@angor/tailwind/plugins/theming.js
+++ b/src/@angor/tailwind/plugins/theming.js
@@ -13,17 +13,6 @@ const jsonToSassMap = require(
     path.resolve(__dirname, '../utils/json-to-sass-map')
 );
 
-// -----------------------------------------------------------------------------------------------------
-// @ Utilities
-// -----------------------------------------------------------------------------------------------------
-
-/**
- * Normalizes the provided theme by omitting empty values and values that
- * start with "on" from each palette. Also sets the correct DEFAULT value
- * of each palette.
- *
- * @param theme
- */
 const normalizeTheme = (theme) => {
     return _.fromPairs(
         _.map(
@@ -43,17 +32,10 @@ const normalizeTheme = (theme) => {
     );
 };
 
-// -----------------------------------------------------------------------------------------------------
-// @ ANGOR TailwindCSS Main Plugin
-// -----------------------------------------------------------------------------------------------------
 const theming = plugin.withOptions(
     (options) =>
         ({ addComponents, e, theme }) => {
-            /**
-             * Create user themes object by going through the provided themes and
-             * merging them with the provided "default" so, we can have a complete
-             * set of color palettes for each user theme.
-             */
+
             const userThemes = _.fromPairs(
                 _.map(options.themes, (theme, themeName) => [
                     themeName,
@@ -61,10 +43,6 @@ const theming = plugin.withOptions(
                 ])
             );
 
-            /**
-             * Normalize the themes and assign it to the themes object. This will
-             * be the final object that we create a SASS map from
-             */
             let themes = _.fromPairs(
                 _.map(userThemes, (theme, themeName) => [
                     themeName,
@@ -72,10 +50,6 @@ const theming = plugin.withOptions(
                 ])
             );
 
-            /**
-             * Go through the themes to generate the contrasts and filter the
-             * palettes to only have "primary", "accent" and "warn" objects.
-             */
             themes = _.fromPairs(
                 _.map(themes, (theme, themeName) => [
                     themeName,
@@ -105,10 +79,6 @@ const theming = plugin.withOptions(
                 ])
             );
 
-            /**
-             * Go through the themes and attach appropriate class selectors so,
-             * we can use them to encapsulate each theme.
-             */
             themes = _.fromPairs(
                 _.map(themes, (theme, themeName) => [
                     themeName,
@@ -119,18 +89,15 @@ const theming = plugin.withOptions(
                 ])
             );
 
-            /* Generate the SASS map using the themes object */
             const sassMap = jsonToSassMap(
                 JSON.stringify({ 'user-themes': themes })
             );
 
-            /* Get the file path */
             const filename = path.resolve(
                 __dirname,
                 '../../styles/user-themes.scss'
             );
 
-            /* Read the file and get its data */
             let data;
             try {
                 data = fs.readFileSync(filename, { encoding: 'utf8' });
@@ -138,7 +105,6 @@ const theming = plugin.withOptions(
                 console.error(err);
             }
 
-            /* Write the file if the map has been changed */
             if (data !== sassMap) {
                 try {
                     fs.writeFileSync(filename, sassMap, { encoding: 'utf8' });
@@ -147,11 +113,6 @@ const theming = plugin.withOptions(
                 }
             }
 
-            /**
-             * Iterate through the user's themes and build Tailwind components containing
-             * CSS Custom Properties using the colors from them. This allows switching
-             * themes by simply replacing a class name as well as nesting them.
-             */
             addComponents(
                 _.fromPairs(
                     _.map(options.themes, (theme, themeName) => [
@@ -214,9 +175,7 @@ const theming = plugin.withOptions(
                 )
             );
 
-            /**
-             * Generate scheme based css custom properties and utility classes
-             */
+
             const schemeCustomProps = _.map(
                 ['light', 'dark'],
                 (colorScheme) => {
@@ -234,31 +193,9 @@ const theming = plugin.withOptions(
 
                     return {
                         [isDark ? darkSchemeSelectors : lightSchemeSelectors]: {
-                            /**
-                             * If a custom property is not available, browsers will use
-                             * the fallback value. In this case, we want to use '--is-dark'
-                             * as the indicator of a dark theme so, we can use it like this:
-                             * background-color: var(--is-dark, red);
-                             *
-                             * If we set '--is-dark' as "true" on dark themes, the above rule
-                             * won't work because of the said "fallback value" logic. Therefore,
-                             * we set the '--is-dark' to "false" on light themes and not set it
-                             * at all on dark themes so that the fallback value can be used on
-                             * dark themes.
-                             *
-                             * On light themes, since '--is-dark' exists, the above rule will be
-                             * interpolated as:
-                             * "background-color: false"
-                             *
-                             * On dark themes, since '--is-dark' doesn't exist, the fallback value
-                             * will be used ('red' in this case) and the rule will be interpolated as:
-                             * "background-color: red"
-                             *
-                             * It's easier to understand and remember like this.
-                             */
+
                             ...(!isDark ? { '--is-dark': 'false' } : {}),
 
-                            /* Generate custom properties from customProps */
                             ..._.fromPairs(
                                 _.flatten(
                                     _.map(background, (value, key) => [
@@ -287,7 +224,6 @@ const theming = plugin.withOptions(
             );
 
             const schemeUtilities = (() => {
-                /* Generate general styles & utilities */
                 return {};
             })();
 
@@ -298,11 +234,6 @@ const theming = plugin.withOptions(
         return {
             theme: {
                 extend: {
-                    /**
-                     * Add 'Primary', 'Accent' and 'Warn' palettes as colors so all color utilities
-                     * are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc.
-                     * This will also allow using arbitrary values with them such as opacity and such.
-                     */
                     colors: _.fromPairs(
                         _.flatten(
                             _.map(
@@ -398,7 +329,6 @@ const theming = plugin.withOptions(
                         },
                     },
                 },
-
             },
         };
     }
diff --git a/src/@angor/tailwind/plugins/utilities.js b/src/@angor/tailwind/plugins/utilities.js
index ccad64c..30ce41e 100644
--- a/src/@angor/tailwind/plugins/utilities.js
+++ b/src/@angor/tailwind/plugins/utilities.js
@@ -1,11 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
 module.exports = plugin(({ addComponents }) => {
-    /*
-     * Add base components. These are very important for everything to look
-     * correct. We are adding these to the 'components' layer because they must
-     * be defined before pretty much everything else.
-     */
     addComponents({
         '.mat-icon': {
             '--tw-text-opacity': '1',
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index a8b9eb0..9c62f14 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,6 +1,6 @@
 :host {
     display: flex;
-    flex: 1 1 auto;  // Flex-grow, flex-shrink, and basis set to auto
-    width: 100%;     // Full width of the container
-    height: 100%;    // Full height of the container
+    flex: 1 1 auto; // Flex-grow, flex-shrink, and basis set to auto
+    width: 100%; // Full width of the container
+    height: 100%; // Full height of the container
 }
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index c49ccef..64a603b 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,5 +1,11 @@
+import { provideAngor } from '@angor';
 import { provideHttpClient } from '@angular/common/http';
-import { APP_INITIALIZER, ApplicationConfig, inject, isDevMode } from '@angular/core';
+import {
+    APP_INITIALIZER,
+    ApplicationConfig,
+    inject,
+    isDevMode,
+} from '@angular/core';
 import { LuxonDateAdapter } from '@angular/material-luxon-adapter';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
@@ -9,20 +15,18 @@ import {
     withInMemoryScrolling,
     withPreloading,
 } from '@angular/router';
-import { provideAngor } from '@angor';
+import { provideServiceWorker } from '@angular/service-worker';
 import { TranslocoService, provideTransloco } from '@ngneat/transloco';
+import { WebLNProvider } from '@webbtc/webln-types';
 import { appRoutes } from 'app/app.routes';
 import { provideIcons } from 'app/core/icons/icons.provider';
 import { firstValueFrom } from 'rxjs';
 import { TranslocoHttpLoader } from './core/transloco/transloco.http-loader';
-import { provideServiceWorker } from '@angular/service-worker';
-import { HashService } from './services/hash.service';
 import { navigationServices } from './layout/navigation/navigation.services';
-import { WebLNProvider } from '@webbtc/webln-types';
+import { HashService } from './services/hash.service';
 import { NostrWindow } from './types/nostr';
 
 export function initializeApp(hashService: HashService) {
-    console.log('initializeApp. Getting hashService.load.');
     return (): Promise<void> => hashService.load();
 }
 export const appConfig: ApplicationConfig = {
@@ -31,7 +35,7 @@ export const appConfig: ApplicationConfig = {
         provideHttpClient(),
         provideServiceWorker('ngsw-worker.js', {
             enabled: !isDevMode(),
-            registrationStrategy: 'registerWhenStable:30000'
+            registrationStrategy: 'registerWhenStable:30000',
         }),
         {
             provide: APP_INITIALIZER,
@@ -54,12 +58,12 @@ export const appConfig: ApplicationConfig = {
             provide: MAT_DATE_FORMATS,
             useValue: {
                 parse: {
-                    dateInput: 'D',  // Date format for parsing
+                    dateInput: 'D', // Date format for parsing
                 },
                 display: {
-                    dateInput: 'DDD',             // Date format for input display
-                    monthYearLabel: 'LLL yyyy',   // Format for month-year labels
-                    dateA11yLabel: 'DD',          // Accessible format for dates
+                    dateInput: 'DDD', // Date format for input display
+                    monthYearLabel: 'LLL yyyy', // Format for month-year labels
+                    dateA11yLabel: 'DD', // Accessible format for dates
                     monthYearA11yLabel: 'LLLL yyyy', // Accessible format for month-year
                 },
             },
@@ -72,7 +76,7 @@ export const appConfig: ApplicationConfig = {
                     {
                         id: 'en',
                         label: 'English',
-                    }
+                    },
                 ],
                 defaultLang: 'en',
                 fallbackLang: 'en',
@@ -121,13 +125,11 @@ export const appConfig: ApplicationConfig = {
                 ],
             },
         }),
-
     ],
 };
 declare global {
     interface Window {
-      webln?: WebLNProvider;
-      nostr?: NostrWindow;
+        webln?: WebLNProvider;
+        nostr?: NostrWindow;
     }
-  }
-
+}
diff --git a/src/app/app.resolvers.ts b/src/app/app.resolvers.ts
index 30ccba7..0ae4057 100644
--- a/src/app/app.resolvers.ts
+++ b/src/app/app.resolvers.ts
@@ -9,11 +9,11 @@ import { forkJoin } from 'rxjs';
  */
 export const initialDataResolver = () => {
     const navigationService = inject(NavigationService);
-     const quickChatService = inject(QuickChatService);
+    const quickChatService = inject(QuickChatService);
 
     // Combine API calls into a single observable
     return forkJoin([
-        navigationService.get(),         // Fetch navigation data
+        navigationService.get(), // Fetch navigation data
         //  quickChatService.getChats(),     // Fetch chat data
     ]);
 };
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index e64ac3e..d302ed5 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,31 +1,30 @@
 import { Route } from '@angular/router';
 import { initialDataResolver } from 'app/app.resolvers';
- import { LayoutComponent } from 'app/layout/layout.component';
+import { LayoutComponent } from 'app/layout/layout.component';
 import { authGuard } from './core/auth/auth.guard';
 
 /**
  * Application routes configuration
  */
 export const appRoutes: Route[] = [
-
     // Redirect root path to '/explore'
     {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'home'
+        redirectTo: 'home',
     },
 
     {
         path: 'project/:pubkey',
         pathMatch: 'full',
-        redirectTo: 'explore'
+        redirectTo: 'explore',
     },
 
     // Redirect login user to '/explore'
     {
         path: 'login-redirect',
         pathMatch: 'full',
-        redirectTo: 'explore'
+        redirectTo: 'explore',
     },
 
     // Routes for guests
@@ -36,13 +35,15 @@ export const appRoutes: Route[] = [
         children: [
             {
                 path: 'login',
-                loadChildren: () => import('app/components/auth/login/login.routes')
+                loadChildren: () =>
+                    import('app/components/auth/login/login.routes'),
             },
             {
                 path: 'register',
-                loadChildren: () => import('app/components/auth/register/register.routes')
-            }
-        ]
+                loadChildren: () =>
+                    import('app/components/auth/register/register.routes'),
+            },
+        ],
     },
 
     // Routes for authenticated users
@@ -55,13 +56,12 @@ export const appRoutes: Route[] = [
         children: [
             {
                 path: 'logout',
-                loadChildren: () => import('app/components/auth/logout/logout.routes')
-            }
-        ]
+                loadChildren: () =>
+                    import('app/components/auth/logout/logout.routes'),
+            },
+        ],
     },
 
-
-
     // Authenticated routes for Angor
     {
         path: '',
@@ -72,41 +72,49 @@ export const appRoutes: Route[] = [
         children: [
             {
                 path: 'home',
-                loadChildren: () => import('app/components/home/home.routes')
+                loadChildren: () => import('app/components/home/home.routes'),
             },
             {
                 path: 'explore',
-                loadChildren: () => import('app/components/explore/explore.routes')
+                loadChildren: () =>
+                    import('app/components/explore/explore.routes'),
             },
             {
                 path: 'profile',
-                loadChildren: () => import('app/components/profile/profile.routes')
+                loadChildren: () =>
+                    import('app/components/profile/profile.routes'),
             },
             {
                 path: 'profile/:pubkey',
-                loadChildren: () => import('app/components/profile/profile.routes')
+                loadChildren: () =>
+                    import('app/components/profile/profile.routes'),
             },
             {
                 path: 'settings',
-                loadChildren: () => import('app/components/settings/settings.routes')
+                loadChildren: () =>
+                    import('app/components/settings/settings.routes'),
             },
             {
                 path: 'settings/:id',
-                loadChildren: () => import('app/components/settings/settings.routes')
+                loadChildren: () =>
+                    import('app/components/settings/settings.routes'),
             },
             {
                 path: 'chat',
-                loadChildren: () => import('app/components/chat/chat.routes')
+                loadChildren: () => import('app/components/chat/chat.routes'),
             },
             {
                 path: '404-not-found',
                 pathMatch: 'full',
-                loadChildren: () => import('app/components/pages/error/error-404/error-404.routes')
+                loadChildren: () =>
+                    import(
+                        'app/components/pages/error/error-404/error-404.routes'
+                    ),
             },
             {
                 path: '**',
-                redirectTo: '404-not-found'
-            }
-        ]
-    }
+                redirectTo: '404-not-found',
+            },
+        ],
+    },
 ];
diff --git a/src/app/components/auth/login/login.component.html b/src/app/components/auth/login/login.component.html
index ab4633f..2529259 100644
--- a/src/app/components/auth/login/login.component.html
+++ b/src/app/components/auth/login/login.component.html
@@ -1,18 +1,33 @@
-<div class="flex min-w-0 flex-auto flex-col items-center sm:flex-row sm:justify-center md:items-start md:justify-start">
+<div
+    class="flex min-w-0 flex-auto flex-col items-center sm:flex-row sm:justify-center md:items-start md:justify-start"
+>
     <div
-        class="w-full px-4 py-8 sm:bg-card sm:w-auto sm:rounded-2xl sm:p-12 sm:shadow md:flex md:h-full md:w-1/2 md:items-center md:justify-end md:rounded-none md:p-16 md:shadow-none">
+        class="w-full px-4 py-8 sm:bg-card sm:w-auto sm:rounded-2xl sm:p-12 sm:shadow md:flex md:h-full md:w-1/2 md:items-center md:justify-end md:rounded-none md:p-16 md:shadow-none"
+    >
         <div class="mx-auto w-full max-w-80 sm:mx-0 sm:w-80">
             <!-- Title -->
-            <div class="mt-8 text-4xl font-extrabold leading-tight tracking-tight">
+            <div
+                class="mt-8 text-4xl font-extrabold leading-tight tracking-tight"
+            >
                 Login
             </div>
             <div class="mt-0.5 flex items-baseline font-medium">
                 <div>Don't have an account?</div>
-                <a class="ml-1 text-primary-500 hover:underline" [routerLink]="['/register']">Register</a>
+                <a
+                    class="ml-1 text-primary-500 hover:underline"
+                    [routerLink]="['/register']"
+                    >Register</a
+                >
             </div>
 
-            <angor-alert *ngIf="showSecAlert" class="mt-8" [appearance]="'outline'" [showIcon]="false" [type]="secAlert.type"
-                [@shake]="secAlert.type === 'error'">
+            <angor-alert
+                *ngIf="showSecAlert"
+                class="mt-8"
+                [appearance]="'outline'"
+                [showIcon]="false"
+                [type]="secAlert.type"
+                [@shake]="secAlert.type === 'error'"
+            >
                 {{ secAlert.message }}
             </angor-alert>
 
@@ -26,8 +41,16 @@
 
                 <!-- extension login buttons -->
                 <div class="mt-8 flex items-center space-x-4">
-                    <button class="flex-auto space-x-2" type="button" mat-stroked-button (click)="loginWithNostrExtension()">
-                        <mat-icon class="icon-size-5" [svgIcon]="'feather:zap'"></mat-icon>
+                    <button
+                        class="flex-auto space-x-2"
+                        type="button"
+                        mat-stroked-button
+                        (click)="loginWithNostrExtension()"
+                    >
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'feather:zap'"
+                        ></mat-icon>
                         <span>Login with Nostr Extension</span>
                     </button>
                 </div>
@@ -40,7 +63,11 @@
             </div>
 
             <!-- Login form with Secret Key -->
-            <form class="mt-8" [formGroup]="SecretKeyLoginForm" (ngSubmit)="loginWithSecretKey()">
+            <form
+                class="mt-8"
+                [formGroup]="SecretKeyLoginForm"
+                (ngSubmit)="loginWithSecretKey()"
+            >
                 <!-- secret key field -->
                 <div class="mt-8 flex items-center">
                     <div class="mt-px flex-auto border-t"></div>
@@ -49,8 +76,14 @@
                 </div>
                 <mat-form-field class="w-full">
                     <mat-label>Secret Key</mat-label>
-                    <input matInput formControlName="secretKey" autocomplete="secretKey" />
-                    @if (SecretKeyLoginForm.get('secretKey').hasError('required')) {
+                    <input
+                        matInput
+                        formControlName="secretKey"
+                        autocomplete="secretKey"
+                    />
+                    @if (
+                        SecretKeyLoginForm.get('secretKey').hasError('required')
+                    ) {
                         <mat-error> Secret key is required </mat-error>
                     }
                 </mat-form-field>
@@ -58,47 +91,94 @@
                 <!-- Password field -->
                 <mat-form-field class="w-full">
                     <mat-label>Password</mat-label>
-                    <input matInput type="password" [formControlName]="'password'" autocomplete="current-password-seckey" #secretPasswordField />
-                    <button mat-icon-button type="button" (click)="
-                secretPasswordField.type === 'password'
-                    ? (secretPasswordField.type = 'text')
-                    : (secretPasswordField.type = 'password')
-            " matSuffix>
-                        <mat-icon *ngIf="secretPasswordField.type === 'password'" class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:eye'"></mat-icon>
-                        <mat-icon *ngIf="secretPasswordField.type === 'text'" class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
+                    <input
+                        matInput
+                        type="password"
+                        [formControlName]="'password'"
+                        autocomplete="current-password-seckey"
+                        #secretPasswordField
+                    />
+                    <button
+                        mat-icon-button
+                        type="button"
+                        (click)="
+                            secretPasswordField.type === 'password'
+                                ? (secretPasswordField.type = 'text')
+                                : (secretPasswordField.type = 'password')
+                        "
+                        matSuffix
+                    >
+                        <mat-icon
+                            *ngIf="secretPasswordField.type === 'password'"
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:eye'"
+                        ></mat-icon>
+                        <mat-icon
+                            *ngIf="secretPasswordField.type === 'text'"
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:eye-slash'"
+                        ></mat-icon>
                     </button>
-                    <mat-error *ngIf="SecretKeyLoginForm.get('password').hasError('required')"> Password is required
+                    <mat-error
+                        *ngIf="
+                            SecretKeyLoginForm.get('password').hasError(
+                                'required'
+                            )
+                        "
+                    >
+                        Password is required
                     </mat-error>
                 </mat-form-field>
 
                 <!-- Submit button -->
-                <button class="angor-mat-button-large mt-6 w-full" mat-flat-button color="primary"
-                    [disabled]="SecretKeyLoginForm.invalid">
+                <button
+                    class="angor-mat-button-large mt-6 w-full"
+                    mat-flat-button
+                    color="primary"
+                    [disabled]="SecretKeyLoginForm.invalid"
+                >
                     <span *ngIf="!loading">Login</span>
-                    <mat-progress-spinner *ngIf="loading" diameter="24" mode="indeterminate"></mat-progress-spinner>
+                    <mat-progress-spinner
+                        *ngIf="loading"
+                        diameter="24"
+                        mode="indeterminate"
+                    ></mat-progress-spinner>
                 </button>
             </form>
 
-
             <div class="mt-8 flex items-center">
                 <div class="mt-px flex-auto border-t"></div>
                 <div class="text-secondary mx-2">Or enter menemonic</div>
                 <div class="mt-px flex-auto border-t"></div>
             </div>
 
-            <angor-alert *ngIf="showMenemonicAlert" class="mt-8" [appearance]="'outline'" [showIcon]="false" [type]="menemonicAlert.type"
-                [@shake]="menemonicAlert.type === 'error'">
+            <angor-alert
+                *ngIf="showMenemonicAlert"
+                class="mt-8"
+                [appearance]="'outline'"
+                [showIcon]="false"
+                [type]="menemonicAlert.type"
+                [@shake]="menemonicAlert.type === 'error'"
+            >
                 {{ menemonicAlert.message }}
             </angor-alert>
             <!-- Login form with Menemonic -->
-            <form class="mt-8" [formGroup]="MenemonicLoginForm" (ngSubmit)="loginWithMenemonic()">
+            <form
+                class="mt-8"
+                [formGroup]="MenemonicLoginForm"
+                (ngSubmit)="loginWithMenemonic()"
+            >
                 <!-- Menemonic field -->
                 <mat-form-field class="w-full">
                     <mat-label>Menemonic</mat-label>
-                    <input matInput formControlName="menemonic" autocomplete="menemonic" />
-                    @if (MenemonicLoginForm.get('menemonic').hasError('required')) {
+                    <input
+                        matInput
+                        formControlName="menemonic"
+                        autocomplete="menemonic"
+                    />
+                    @if (
+                        MenemonicLoginForm.get('menemonic').hasError('required')
+                    ) {
                         <mat-error> Menemonic is required </mat-error>
                     }
                 </mat-form-field>
@@ -106,66 +186,156 @@
                 <!-- Passphrase field -->
                 <mat-form-field class="w-full">
                     <mat-label>Passphrase (Optional)</mat-label>
-                    <input matInput type="password" [formControlName]="'passphrase'" autocomplete="current-passphrase-menemonic"
-                        #passphraseField />
-                    <button mat-icon-button type="button" (click)="
-                        passphraseField.type === 'password'
-                            ? (passphraseField.type = 'text')
-                            : (passphraseField.type = 'password')
-                    " matSuffix>
-                        <mat-icon *ngIf="passphraseField.type === 'password'" class="icon-size-5" [svgIcon]="'heroicons_solid:eye'"></mat-icon>
-                        <mat-icon *ngIf="passphraseField.type === 'text'" class="icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
+                    <input
+                        matInput
+                        type="password"
+                        [formControlName]="'passphrase'"
+                        autocomplete="current-passphrase-menemonic"
+                        #passphraseField
+                    />
+                    <button
+                        mat-icon-button
+                        type="button"
+                        (click)="
+                            passphraseField.type === 'password'
+                                ? (passphraseField.type = 'text')
+                                : (passphraseField.type = 'password')
+                        "
+                        matSuffix
+                    >
+                        <mat-icon
+                            *ngIf="passphraseField.type === 'password'"
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:eye'"
+                        ></mat-icon>
+                        <mat-icon
+                            *ngIf="passphraseField.type === 'text'"
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:eye-slash'"
+                        ></mat-icon>
                     </button>
-                    <mat-error *ngIf="MenemonicLoginForm.get('passphrase').hasError('required')"> Passphrase is required
+                    <mat-error
+                        *ngIf="
+                            MenemonicLoginForm.get('passphrase').hasError(
+                                'required'
+                            )
+                        "
+                    >
+                        Passphrase is required
                     </mat-error>
                 </mat-form-field>
 
                 <!-- Password field -->
                 <mat-form-field class="w-full">
                     <mat-label>Password</mat-label>
-                    <input matInput type="password" [formControlName]="'password'" autocomplete="current-password-menemonic"
-                        #menemonicPasswordField />
-                    <button mat-icon-button type="button" (click)="
-                        menemonicPasswordField.type === 'password'
-                            ? (menemonicPasswordField.type = 'text')
-                            : (menemonicPasswordField.type = 'password')
-                    " matSuffix>
-                        <mat-icon *ngIf="menemonicPasswordField.type === 'password'" class="icon-size-5" [svgIcon]="'heroicons_solid:eye'"></mat-icon>
-                        <mat-icon *ngIf="menemonicPasswordField.type === 'text'" class="icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
+                    <input
+                        matInput
+                        type="password"
+                        [formControlName]="'password'"
+                        autocomplete="current-password-menemonic"
+                        #menemonicPasswordField
+                    />
+                    <button
+                        mat-icon-button
+                        type="button"
+                        (click)="
+                            menemonicPasswordField.type === 'password'
+                                ? (menemonicPasswordField.type = 'text')
+                                : (menemonicPasswordField.type = 'password')
+                        "
+                        matSuffix
+                    >
+                        <mat-icon
+                            *ngIf="menemonicPasswordField.type === 'password'"
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:eye'"
+                        ></mat-icon>
+                        <mat-icon
+                            *ngIf="menemonicPasswordField.type === 'text'"
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:eye-slash'"
+                        ></mat-icon>
                     </button>
-                    <mat-error *ngIf="MenemonicLoginForm.get('password').hasError('required')"> Password is required
+                    <mat-error
+                        *ngIf="
+                            MenemonicLoginForm.get('password').hasError(
+                                'required'
+                            )
+                        "
+                    >
+                        Password is required
                     </mat-error>
                 </mat-form-field>
 
                 <!-- Submit button -->
-                <button class="angor-mat-button-large mt-6 w-full" mat-flat-button color="primary"
-                    [disabled]="MenemonicLoginForm.invalid">
+                <button
+                    class="angor-mat-button-large mt-6 w-full"
+                    mat-flat-button
+                    color="primary"
+                    [disabled]="MenemonicLoginForm.invalid"
+                >
                     <span *ngIf="!loading">Login</span>
-                    <mat-progress-spinner *ngIf="loading" diameter="24" mode="indeterminate"></mat-progress-spinner>
+                    <mat-progress-spinner
+                        *ngIf="loading"
+                        diameter="24"
+                        mode="indeterminate"
+                    ></mat-progress-spinner>
                 </button>
             </form>
         </div>
     </div>
     <div
-        class="relative hidden h-full w-1/2 flex-auto items-center justify-center overflow-hidden bg-gray-800 p-16 dark:border-l md:flex lg:px-28">
-
-        <svg class="absolute inset-0 pointer-events-none" viewBox="0 0 960 540" width="100%" height="100%"
-            preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
-            <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
+        class="relative hidden h-full w-1/2 flex-auto items-center justify-center overflow-hidden bg-gray-800 p-16 dark:border-l md:flex lg:px-28"
+    >
+        <svg
+            class="pointer-events-none absolute inset-0"
+            viewBox="0 0 960 540"
+            width="100%"
+            height="100%"
+            preserveAspectRatio="xMidYMax slice"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g
+                class="text-gray-700 opacity-25"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="100"
+            >
                 <circle r="234" cx="196" cy="23"></circle>
                 <circle r="234" cx="790" cy="491"></circle>
             </g>
         </svg>
 
-        <svg class="absolute -top-16 -right-16 text-gray-700" viewBox="0 0 220 192" width="220" height="192"
-            fill="none">
+        <svg
+            class="absolute -right-16 -top-16 text-gray-700"
+            viewBox="0 0 220 192"
+            width="220"
+            height="192"
+            fill="none"
+        >
             <defs>
-                <pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20"
-                    patternUnits="userSpaceOnUse">
-                    <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
+                <pattern
+                    id="837c3e70-6c3a-44e6-8854-cc48c737b659"
+                    x="0"
+                    y="0"
+                    width="20"
+                    height="20"
+                    patternUnits="userSpaceOnUse"
+                >
+                    <rect
+                        x="0"
+                        y="0"
+                        width="4"
+                        height="4"
+                        fill="currentColor"
+                    ></rect>
                 </pattern>
             </defs>
-            <rect width="220" height="192" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"></rect>
+            <rect
+                width="220"
+                height="192"
+                fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
+            ></rect>
         </svg>
         <!-- Background and Content -->
         <div class="relative z-10 w-full max-w-2xl">
diff --git a/src/app/components/auth/login/login.component.ts b/src/app/components/auth/login/login.component.ts
index 85f7aad..0aab72a 100644
--- a/src/app/components/auth/login/login.component.ts
+++ b/src/app/components/auth/login/login.component.ts
@@ -1,7 +1,13 @@
 import { AngorAlertComponent } from '@angor/components/alert';
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+    FormBuilder,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -26,7 +32,7 @@ import { SignerService } from 'app/services/signer.service';
         MatIconModule,
         MatCheckboxModule,
         MatProgressSpinnerModule,
-        CommonModule
+        CommonModule,
     ],
 })
 export class LoginComponent implements OnInit {
@@ -41,15 +47,15 @@ export class LoginComponent implements OnInit {
     loading = false;
     isInstalledExtension = false;
     privateKey: Uint8Array = new Uint8Array();
-    publicKey: string = "";
-    npub: string = "";
-    nsec: string = "";
+    publicKey: string = '';
+    npub: string = '';
+    nsec: string = '';
 
     constructor(
         private _formBuilder: FormBuilder,
         private _router: Router,
         private _signerService: SignerService
-    ) { }
+    ) {}
 
     ngOnInit(): void {
         this.initializeForms();
@@ -59,20 +65,25 @@ export class LoginComponent implements OnInit {
     private initializeForms(): void {
         this.SecretKeyLoginForm = this._formBuilder.group({
             secretKey: ['', [Validators.required, Validators.minLength(3)]],
-            password: ['', Validators.required]
+            password: ['', Validators.required],
         });
 
         this.MenemonicLoginForm = this._formBuilder.group({
             menemonic: ['', [Validators.required, Validators.minLength(3)]],
             passphrase: [''], // Passphrase is optional
-            password: ['', Validators.required]
+            password: ['', Validators.required],
         });
     }
 
     private checkNostrExtensionAvailability(): void {
-        const globalContext = globalThis as unknown as { nostr?: { signEvent?: Function } };
+        const globalContext = globalThis as unknown as {
+            nostr?: { signEvent?: Function };
+        };
 
-        if (globalContext.nostr && typeof globalContext.nostr.signEvent === 'function') {
+        if (
+            globalContext.nostr &&
+            typeof globalContext.nostr.signEvent === 'function'
+        ) {
             this.isInstalledExtension = true;
         } else {
             this.isInstalledExtension = false;
@@ -91,7 +102,10 @@ export class LoginComponent implements OnInit {
         this.showSecAlert = false;
 
         try {
-            const success = this._signerService.handleLoginWithKey(secretKey,password); // Updated method to handle both nsec and hex
+            const success = this._signerService.handleLoginWithKey(
+                secretKey,
+                password
+            ); // Updated method to handle both nsec and hex
 
             if (success) {
                 // Successful login
@@ -102,26 +116,33 @@ export class LoginComponent implements OnInit {
         } catch (error) {
             // Handle login failure
             this.loading = false;
-            this.secAlert.message = (error instanceof Error) ? error.message : 'An unexpected error occurred.';
+            this.secAlert.message =
+                error instanceof Error
+                    ? error.message
+                    : 'An unexpected error occurred.';
             this.showSecAlert = true;
-            console.error("Login error: ", error);
+            console.error('Login error: ', error);
         }
     }
 
-
     loginWithMenemonic(): void {
         if (this.MenemonicLoginForm.invalid) {
             return;
         }
 
         const menemonic = this.MenemonicLoginForm.get('menemonic')?.value;
-        const passphrase = this.MenemonicLoginForm.get('passphrase')?.value || ''; // Optional passphrase
+        const passphrase =
+            this.MenemonicLoginForm.get('passphrase')?.value || ''; // Optional passphrase
         const password = this.MenemonicLoginForm.get('password')?.value;
 
         this.loading = true;
         this.showMenemonicAlert = false;
 
-        const success = this._signerService.handleLoginWithMenemonic(menemonic, passphrase,password);
+        const success = this._signerService.handleLoginWithMenemonic(
+            menemonic,
+            passphrase,
+            password
+        );
 
         if (success) {
             this._router.navigateByUrl('/home');
@@ -140,5 +161,4 @@ export class LoginComponent implements OnInit {
             console.error('Failed to log in using Nostr extension');
         }
     }
-
 }
diff --git a/src/app/components/auth/logout/logout.component.html b/src/app/components/auth/logout/logout.component.html
index 7f6bd4e..f9fa2e7 100644
--- a/src/app/components/auth/logout/logout.component.html
+++ b/src/app/components/auth/logout/logout.component.html
@@ -27,9 +27,8 @@
                 <a
                     class="ml-1 text-primary-500 hover:underline"
                     [routerLink]="['/login']"
-                    >
+                >
                     <span class="text-2xl font-extrabold">Go to login</span>
-
                 </a>
             </div>
         </div>
diff --git a/src/app/components/auth/logout/logout.component.ts b/src/app/components/auth/logout/logout.component.ts
index 43d89de..4a476fd 100644
--- a/src/app/components/auth/logout/logout.component.ts
+++ b/src/app/components/auth/logout/logout.component.ts
@@ -19,7 +19,10 @@ export class LogoutComponent implements OnInit, OnDestroy {
     };
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
-    constructor(private _router: Router, private _signerService: SignerService) {}
+    constructor(
+        private _router: Router,
+        private _signerService: SignerService
+    ) {}
 
     ngOnInit(): void {
         timer(1000, 1000)
@@ -35,7 +38,6 @@ export class LogoutComponent implements OnInit, OnDestroy {
             .subscribe();
     }
 
-
     ngOnDestroy(): void {
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -44,6 +46,6 @@ export class LogoutComponent implements OnInit, OnDestroy {
     logout(): void {
         this._signerService.clearPassword();
         this._signerService.logout();
-        console.log("User logged out and keys removed from localStorage.");
+        console.log('User logged out and keys removed from localStorage.');
     }
 }
diff --git a/src/app/components/auth/register/register.component.html b/src/app/components/auth/register/register.component.html
index dcb51fe..4da0a84 100644
--- a/src/app/components/auth/register/register.component.html
+++ b/src/app/components/auth/register/register.component.html
@@ -1,107 +1,231 @@
-<div class="flex min-w-0 flex-auto flex-col items-center sm:flex-row sm:justify-center md:items-start md:justify-start">
+<div
+    class="flex min-w-0 flex-auto flex-col items-center sm:flex-row sm:justify-center md:items-start md:justify-start"
+>
     <div
-        class="w-full px-4 py-8 sm:bg-card sm:w-auto sm:rounded-2xl sm:p-12 sm:shadow md:flex md:h-full md:w-1/2 md:items-center md:justify-end md:rounded-none md:p-16 md:shadow-none">
+        class="w-full px-4 py-8 sm:bg-card sm:w-auto sm:rounded-2xl sm:p-12 sm:shadow md:flex md:h-full md:w-1/2 md:items-center md:justify-end md:rounded-none md:p-16 md:shadow-none"
+    >
         <div class="mx-auto w-full max-w-80 sm:mx-0 sm:w-80">
             <!-- Title -->
-            <div class="mt-8 text-4xl font-extrabold leading-tight tracking-tight">
+            <div
+                class="mt-8 text-4xl font-extrabold leading-tight tracking-tight"
+            >
                 Register
             </div>
             <div class="mt-0.5 flex items-baseline font-medium">
                 <div>Already have an account?</div>
-                <a class="ml-1 text-primary-500 hover:underline" [routerLink]="['/login']">Login
+                <a
+                    class="ml-1 text-primary-500 hover:underline"
+                    [routerLink]="['/login']"
+                    >Login
                 </a>
             </div>
 
             <!-- Alert -->
             @if (showAlert) {
-            <angor-alert class="mt-8" [appearance]="'outline'" [showIcon]="false" [type]="alert.type"
-                [@shake]="alert.type === 'error'">
-                {{ alert.message }}
-            </angor-alert>
+                <angor-alert
+                    class="mt-8"
+                    [appearance]="'outline'"
+                    [showIcon]="false"
+                    [type]="alert.type"
+                    [@shake]="alert.type === 'error'"
+                >
+                    {{ alert.message }}
+                </angor-alert>
             }
 
             <!-- Register form -->
-            <form class="mt-8" [formGroup]="registerForm" #registerNgForm="ngForm">
+            <form
+                class="mt-8"
+                [formGroup]="registerForm"
+                #registerNgForm="ngForm"
+            >
                 <!-- Name field (secretKey) -->
                 <mat-form-field class="w-full">
                     <mat-label>Full name</mat-label>
-                    <input id="name" matInput [formControlName]="'name'" autocomplete="name"/>
-                    <mat-error *ngIf="registerForm.get('name').hasError('required')"> Full name is required </mat-error>
+                    <input
+                        id="name"
+                        matInput
+                        [formControlName]="'name'"
+                        autocomplete="name"
+                    />
+                    <mat-error
+                        *ngIf="registerForm.get('name').hasError('required')"
+                    >
+                        Full name is required
+                    </mat-error>
                 </mat-form-field>
 
                 <!-- Username field -->
                 <mat-form-field class="w-full">
                     <mat-label>Username</mat-label>
-                    <input id="username" matInput [formControlName]="'username'" autocomplete="username"/>
-                    <mat-error *ngIf="registerForm.get('username').hasError('required')"> Username is required </mat-error>
+                    <input
+                        id="username"
+                        matInput
+                        [formControlName]="'username'"
+                        autocomplete="username"
+                    />
+                    <mat-error
+                        *ngIf="
+                            registerForm.get('username').hasError('required')
+                        "
+                    >
+                        Username is required
+                    </mat-error>
                 </mat-form-field>
 
                 <!-- About field -->
                 <mat-form-field class="w-full">
                     <mat-label>About</mat-label>
-                    <textarea id="about" matInput [formControlName]="'about'"></textarea>
+                    <textarea
+                        id="about"
+                        matInput
+                        [formControlName]="'about'"
+                    ></textarea>
                 </mat-form-field>
 
                 <!-- Avatar URL field -->
                 <mat-form-field class="w-full">
                     <mat-label>Avatar URL</mat-label>
-                    <input id="avatarUrl" matInput [formControlName]="'avatarUrl'" autocomplete="avatarUrl" />
+                    <input
+                        id="avatarUrl"
+                        matInput
+                        [formControlName]="'avatarUrl'"
+                        autocomplete="avatarUrl"
+                    />
                 </mat-form-field>
-                 <!-- Password field -->
+                <!-- Password field -->
                 <mat-form-field class="w-full">
                     <mat-label>Password</mat-label>
-                    <input id="password" matInput type="password" [formControlName]="'password'" autocomplete="password" #passwordField />
-                    <button mat-icon-button type="button" (click)="
+                    <input
+                        id="password"
+                        matInput
+                        type="password"
+                        [formControlName]="'password'"
+                        autocomplete="password"
+                        #passwordField
+                    />
+                    <button
+                        mat-icon-button
+                        type="button"
+                        (click)="
                             passwordField.type === 'password'
                                 ? (passwordField.type = 'text')
                                 : (passwordField.type = 'password')
-                        " matSuffix>
-                        <mat-icon *ngIf="passwordField.type === 'password'" class="icon-size-5" [svgIcon]="'heroicons_solid:eye'"></mat-icon>
-                        <mat-icon *ngIf="passwordField.type === 'text'" class="icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
+                        "
+                        matSuffix
+                    >
+                        <mat-icon
+                            *ngIf="passwordField.type === 'password'"
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:eye'"
+                        ></mat-icon>
+                        <mat-icon
+                            *ngIf="passwordField.type === 'text'"
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:eye-slash'"
+                        ></mat-icon>
                     </button>
-                    <mat-error *ngIf="registerForm.get('password').hasError('required')"> Password is required </mat-error>
+                    <mat-error
+                        *ngIf="
+                            registerForm.get('password').hasError('required')
+                        "
+                    >
+                        Password is required
+                    </mat-error>
                 </mat-form-field>
 
                 <!-- ToS and PP -->
                 <div class="mt-1.5 inline-flex w-full items-end">
-                    <mat-checkbox class="-ml-2" [color]="'primary'" [formControlName]="'agreements'">
+                    <mat-checkbox
+                        class="-ml-2"
+                        [color]="'primary'"
+                        [formControlName]="'agreements'"
+                    >
                         <span>I agree with</span>
-                        <a class="ml-1 text-primary-500 hover:underline" [routerLink]="['./']">Terms</a>
+                        <a
+                            class="ml-1 text-primary-500 hover:underline"
+                            [routerLink]="['./']"
+                            >Terms</a
+                        >
                         <span>and</span>
-                        <a class="ml-1 text-primary-500 hover:underline" [routerLink]="['./']">Privacy Policy</a>
+                        <a
+                            class="ml-1 text-primary-500 hover:underline"
+                            [routerLink]="['./']"
+                            >Privacy Policy</a
+                        >
                     </mat-checkbox>
                 </div>
 
                 <!-- Submit button -->
-                <button class="angor-mat-button-large mt-6 w-full" mat-flat-button [color]="'primary'"
-                    [disabled]="registerForm.invalid" (click)="register()">
+                <button
+                    class="angor-mat-button-large mt-6 w-full"
+                    mat-flat-button
+                    [color]="'primary'"
+                    [disabled]="registerForm.invalid"
+                    (click)="register()"
+                >
                     <span>Create your account</span>
-                    <mat-progress-spinner *ngIf="registerForm.disabled" [diameter]="24" [mode]="'indeterminate'"></mat-progress-spinner>
+                    <mat-progress-spinner
+                        *ngIf="registerForm.disabled"
+                        [diameter]="24"
+                        [mode]="'indeterminate'"
+                    ></mat-progress-spinner>
                 </button>
             </form>
-
         </div>
     </div>
     <div
-        class="relative hidden h-full w-1/2 flex-auto items-center justify-center overflow-hidden bg-gray-800 p-16 dark:border-l md:flex lg:px-28">
-
-        <svg class="absolute inset-0 pointer-events-none" viewBox="0 0 960 540" width="100%" height="100%"
-            preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
-            <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
+        class="relative hidden h-full w-1/2 flex-auto items-center justify-center overflow-hidden bg-gray-800 p-16 dark:border-l md:flex lg:px-28"
+    >
+        <svg
+            class="pointer-events-none absolute inset-0"
+            viewBox="0 0 960 540"
+            width="100%"
+            height="100%"
+            preserveAspectRatio="xMidYMax slice"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g
+                class="text-gray-700 opacity-25"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="100"
+            >
                 <circle r="234" cx="196" cy="23"></circle>
                 <circle r="234" cx="790" cy="491"></circle>
             </g>
         </svg>
 
-        <svg class="absolute -top-16 -right-16 text-gray-700" viewBox="0 0 220 192" width="220" height="192"
-            fill="none">
+        <svg
+            class="absolute -right-16 -top-16 text-gray-700"
+            viewBox="0 0 220 192"
+            width="220"
+            height="192"
+            fill="none"
+        >
             <defs>
-                <pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20"
-                    patternUnits="userSpaceOnUse">
-                    <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
+                <pattern
+                    id="837c3e70-6c3a-44e6-8854-cc48c737b659"
+                    x="0"
+                    y="0"
+                    width="20"
+                    height="20"
+                    patternUnits="userSpaceOnUse"
+                >
+                    <rect
+                        x="0"
+                        y="0"
+                        width="4"
+                        height="4"
+                        fill="currentColor"
+                    ></rect>
                 </pattern>
             </defs>
-            <rect width="220" height="192" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"></rect>
+            <rect
+                width="220"
+                height="192"
+                fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
+            ></rect>
         </svg>
         <!-- Content -->
         <div class="relative z-10 w-full max-w-2xl">
@@ -110,8 +234,8 @@
                 <div>Angor Hub</div>
             </div>
             <div class="mt-6 text-lg leading-6 tracking-tight text-gray-400">
-                Angor Hub is a Nostr client that is customized around the Angor protocol, a decentralized crowdfunding
-                platform.
+                Angor Hub is a Nostr client that is customized around the Angor
+                protocol, a decentralized crowdfunding platform.
             </div>
         </div>
     </div>
diff --git a/src/app/components/auth/register/register.component.ts b/src/app/components/auth/register/register.component.ts
index cba6cd1..a143e9c 100644
--- a/src/app/components/auth/register/register.component.ts
+++ b/src/app/components/auth/register/register.component.ts
@@ -1,3 +1,6 @@
+import { angorAnimations } from '@angor/animations';
+import { AngorAlertComponent, AngorAlertType } from '@angor/components/alert';
+import { CommonModule } from '@angular/common';
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
     FormsModule,
@@ -14,11 +17,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Router, RouterLink } from '@angular/router';
-import { angorAnimations } from '@angor/animations';
-import { AngorAlertComponent, AngorAlertType } from '@angor/components/alert';
-import { SecurityService } from 'app/services/security.service';
 import { SignerService } from 'app/services/signer.service';
-import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'auth-register',
@@ -37,7 +36,7 @@ import { CommonModule } from '@angular/common';
         MatIconModule,
         MatCheckboxModule,
         MatProgressSpinnerModule,
-        CommonModule
+        CommonModule,
     ],
 })
 export class RegisterComponent implements OnInit {
@@ -89,7 +88,10 @@ export class RegisterComponent implements OnInit {
         if (!keys) {
             // If key generation failed, enable the form and show an error
             this.registerForm.enable();
-            this.alert = { type: 'error', message: 'Error generating keys. Please try again.' };
+            this.alert = {
+                type: 'error',
+                message: 'Error generating keys. Please try again.',
+            };
             this.showAlert = true;
             return;
         }
@@ -112,11 +114,13 @@ export class RegisterComponent implements OnInit {
         console.log('User Metadata:', userMetadata);
 
         // Display success alert
-        this.alert = { type: 'success', message: 'Account created successfully!' };
+        this.alert = {
+            type: 'success',
+            message: 'Account created successfully!',
+        };
         this.showAlert = true;
 
         // Redirect to home
         this._router.navigateByUrl('/home');
     }
-
 }
diff --git a/src/app/components/chat/chat.routes.ts b/src/app/components/chat/chat.routes.ts
index e0c9af8..6a75382 100644
--- a/src/app/components/chat/chat.routes.ts
+++ b/src/app/components/chat/chat.routes.ts
@@ -25,7 +25,8 @@ const conversationResolver = (
     const chatService = inject(ChatService);
     const router = inject(Router);
 
-    let chatId = route.paramMap.get('id') || localStorage.getItem('currentChatId');
+    let chatId =
+        route.paramMap.get('id') || localStorage.getItem('currentChatId');
 
     if (!chatId) {
         const parentUrl = state.url.split('/').slice(0, -1).join('/');
@@ -45,7 +46,6 @@ const conversationResolver = (
     );
 };
 
-
 export default [
     {
         path: '',
diff --git a/src/app/components/chat/chat.service.ts b/src/app/components/chat/chat.service.ts
index 6609af0..e44d791 100644
--- a/src/app/components/chat/chat.service.ts
+++ b/src/app/components/chat/chat.service.ts
@@ -1,14 +1,28 @@
 import { Injectable, OnDestroy } from '@angular/core';
-import { BehaviorSubject, Observable, Subject, throwError, of, Subscriber, from } from 'rxjs';
-import { catchError, filter, map, switchMap, take, takeUntil, tap } from 'rxjs/operators';
 import { Chat, Contact, Profile } from 'app/components/chat/chat.types';
 import { IndexedDBService } from 'app/services/indexed-db.service';
 import { MetadataService } from 'app/services/metadata.service';
-import { SignerService } from 'app/services/signer.service';
-import { Filter, NostrEvent } from 'nostr-tools';
 import { RelayService } from 'app/services/relay.service';
+import { SignerService } from 'app/services/signer.service';
+import { Filter, getEventHash, NostrEvent } from 'nostr-tools';
 import { EncryptedDirectMessage } from 'nostr-tools/kinds';
-import { getEventHash } from 'nostr-tools';
+import {
+    BehaviorSubject,
+    from,
+    Observable,
+    of,
+    Subject,
+    throwError,
+} from 'rxjs';
+import {
+    catchError,
+    filter,
+    map,
+    switchMap,
+    take,
+    takeUntil,
+    tap,
+} from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class ChatService implements OnDestroy {
@@ -18,22 +32,26 @@ export class ChatService implements OnDestroy {
     private isDecrypting = false;
     private recipientPublicKey: string;
     private message: string;
-    private decryptedPrivateKey: string = "";
+    private decryptedPrivateKey: string = '';
     private _chat: BehaviorSubject<Chat | null> = new BehaviorSubject(null);
     private _chats: BehaviorSubject<Chat[] | null> = new BehaviorSubject(null);
-    private _contact: BehaviorSubject<Contact | null> = new BehaviorSubject(null);
-    private _contacts: BehaviorSubject<Contact[] | null> = new BehaviorSubject(null);
-    private _profile: BehaviorSubject<Profile | null> = new BehaviorSubject(null);
+    private _contact: BehaviorSubject<Contact | null> = new BehaviorSubject(
+        null
+    );
+    private _contacts: BehaviorSubject<Contact[] | null> = new BehaviorSubject(
+        null
+    );
+    private _profile: BehaviorSubject<Profile | null> = new BehaviorSubject(
+        null
+    );
     private _unsubscribeAll: Subject<void> = new Subject<void>();
 
     constructor(
         private _metadataService: MetadataService,
         private _signerService: SignerService,
         private _indexedDBService: IndexedDBService,
-        private _relayService: RelayService,
-
-
-    ) { }
+        private _relayService: RelayService
+    ) {}
     get profile$(): Observable<Profile | null> {
         return this._profile.asObservable();
     }
@@ -54,46 +72,50 @@ export class ChatService implements OnDestroy {
         return this._contacts.asObservable();
     }
 
-
     checkCurrentChatOnPageRefresh(chatIdFromURL: string): void {
         if (chatIdFromURL) {
             const currentChat = this._chat.value;
-            this.getChatById(chatIdFromURL).subscribe(chat => {
+            this.getChatById(chatIdFromURL).subscribe((chat) => {
                 if (chat) {
                     this._chat.next(chat);
                     this.loadChatHistory(chatIdFromURL);
                 }
             });
-
         }
     }
 
-
     async getContact(pubkey: string): Promise<void> {
         try {
             if (!pubkey) {
                 return;
             }
 
-            const metadata = await this._metadataService.fetchMetadataWithCache(pubkey);
+            const metadata =
+                await this._metadataService.fetchMetadataWithCache(pubkey);
             if (metadata) {
                 const contact: Contact = {
                     pubKey: pubkey,
                     displayName: metadata.name ? metadata.name : 'Unknown',
                     picture: metadata.picture,
-                    about: metadata.about
+                    about: metadata.about,
                 };
                 this._contact.next(contact);
 
-                this._indexedDBService.getMetadataStream()
+                this._indexedDBService
+                    .getMetadataStream()
                     .pipe(takeUntil(this._unsubscribeAll))
                     .subscribe((updatedMetadata) => {
-                        if (updatedMetadata && updatedMetadata.pubkey === pubkey) {
+                        if (
+                            updatedMetadata &&
+                            updatedMetadata.pubkey === pubkey
+                        ) {
                             const updatedContact: Contact = {
                                 pubKey: pubkey,
-                                displayName: updatedMetadata.metadata.name ? updatedMetadata.metadata.name : 'Unknown',
+                                displayName: updatedMetadata.metadata.name
+                                    ? updatedMetadata.metadata.name
+                                    : 'Unknown',
                                 picture: updatedMetadata.metadata.picture,
-                                about: updatedMetadata.metadata.about
+                                about: updatedMetadata.metadata.about,
                             };
                             this._contact.next(updatedContact);
                         }
@@ -104,18 +126,23 @@ export class ChatService implements OnDestroy {
         }
     }
 
-
     getContacts(): Observable<Contact[]> {
         return new Observable<Contact[]>((observer) => {
-            this._indexedDBService.getAllUsers()
+            this._indexedDBService
+                .getAllUsers()
                 .then((cachedContacts: Contact[]) => {
                     if (cachedContacts && cachedContacts.length > 0) {
-                        const validatedContacts = cachedContacts.map(contact => {
-                            if (!contact.pubKey) {
-                                console.error('Contact is missing pubKey:', contact);
+                        const validatedContacts = cachedContacts.map(
+                            (contact) => {
+                                if (!contact.pubKey) {
+                                    console.error(
+                                        'Contact is missing pubKey:',
+                                        contact
+                                    );
+                                }
+                                return contact;
                             }
-                            return contact;
-                        });
+                        );
 
                         this._contacts.next(validatedContacts);
                         observer.next(validatedContacts);
@@ -125,33 +152,49 @@ export class ChatService implements OnDestroy {
                     observer.complete();
                 })
                 .catch((error) => {
-                    console.error('Error loading cached contacts from IndexedDB:', error);
+                    console.error(
+                        'Error loading cached contacts from IndexedDB:',
+                        error
+                    );
                     observer.next([]);
                     observer.complete();
                 });
 
-            return { unsubscribe() { } };
+            return { unsubscribe() {} };
         });
     }
 
     async updateChatListMetadata(): Promise<void> {
-        const pubKeys = this.chatList.map(chat => chat.contact?.pubKey).filter(pubKey => pubKey);
+        const pubKeys = this.chatList
+            .map((chat) => chat.contact?.pubKey)
+            .filter((pubKey) => pubKey);
         if (pubKeys.length > 0) {
-            const metadataList = await this._metadataService.fetchMetadataForMultipleKeys(pubKeys);
+            const metadataList =
+                await this._metadataService.fetchMetadataForMultipleKeys(
+                    pubKeys
+                );
 
-            metadataList.forEach(metadata => {
-                const contact = this._contacts.value?.find(contact => contact.pubKey === metadata.pubkey);
+            metadataList.forEach((metadata) => {
+                const contact = this._contacts.value?.find(
+                    (contact) => contact.pubKey === metadata.pubkey
+                );
                 if (contact) {
                     contact.displayName = metadata.metadata.name || 'Unknown';
-                    contact.picture = metadata.metadata.picture || contact.picture;
+                    contact.picture =
+                        metadata.metadata.picture || contact.picture;
                     contact.about = metadata.metadata.about || contact.about;
                 }
 
-                const chat = this.chatList.find(chat => chat.contact?.pubKey === metadata.pubkey);
+                const chat = this.chatList.find(
+                    (chat) => chat.contact?.pubKey === metadata.pubkey
+                );
                 if (chat) {
-                    chat.contact.displayName = metadata.metadata.name || 'Unknown';
-                    chat.contact.picture = metadata.metadata.picture || chat.contact.picture;
-                    chat.contact.about = metadata.metadata.about || chat.contact.about;
+                    chat.contact.displayName =
+                        metadata.metadata.name || 'Unknown';
+                    chat.contact.picture =
+                        metadata.metadata.picture || chat.contact.picture;
+                    chat.contact.about =
+                        metadata.metadata.about || chat.contact.about;
                 }
             });
 
@@ -161,40 +204,60 @@ export class ChatService implements OnDestroy {
     }
 
     private subscribeToRealTimeMetadataUpdates(pubKey: string): void {
-        this._metadataService.getMetadataStream()
-            .pipe(filter(updatedMetadata => updatedMetadata && updatedMetadata.pubkey === pubKey))
-            .subscribe(updatedMetadata => {
-                const chat = this.chatList.find(chat => chat.contact?.pubKey === pubKey);
+        this._metadataService
+            .getMetadataStream()
+            .pipe(
+                filter(
+                    (updatedMetadata) =>
+                        updatedMetadata && updatedMetadata.pubkey === pubKey
+                )
+            )
+            .subscribe((updatedMetadata) => {
+                const chat = this.chatList.find(
+                    (chat) => chat.contact?.pubKey === pubKey
+                );
                 if (chat) {
-                    chat.contact.displayName = updatedMetadata.metadata.name || 'Unknown';
-                    chat.contact.picture = updatedMetadata.metadata.picture || chat.contact.picture;
-                    chat.contact.about = updatedMetadata.metadata.about || chat.contact.about;
+                    chat.contact.displayName =
+                        updatedMetadata.metadata.name || 'Unknown';
+                    chat.contact.picture =
+                        updatedMetadata.metadata.picture ||
+                        chat.contact.picture;
+                    chat.contact.about =
+                        updatedMetadata.metadata.about || chat.contact.about;
                     this._chats.next(this.chatList);
                 }
 
-                const contact = this._contacts.value?.find(contact => contact.pubKey === pubKey);
+                const contact = this._contacts.value?.find(
+                    (contact) => contact.pubKey === pubKey
+                );
                 if (contact) {
-                    contact.displayName = updatedMetadata.metadata.name || 'Unknown';
-                    contact.picture = updatedMetadata.metadata.picture || contact.picture;
-                    contact.about = updatedMetadata.metadata.about || contact.about;
+                    contact.displayName =
+                        updatedMetadata.metadata.name || 'Unknown';
+                    contact.picture =
+                        updatedMetadata.metadata.picture || contact.picture;
+                    contact.about =
+                        updatedMetadata.metadata.about || contact.about;
                     this._contacts.next(this._contacts.value || []);
                 }
             });
     }
 
-
     async getProfile(): Promise<void> {
         try {
             const publicKey = this._signerService.getPublicKey();
-            const metadata = await this._metadataService.fetchMetadataWithCache(publicKey);
+            const metadata =
+                await this._metadataService.fetchMetadataWithCache(publicKey);
             if (metadata) {
                 this._profile.next(metadata);
 
-
-                this._indexedDBService.getMetadataStream()
+                this._indexedDBService
+                    .getMetadataStream()
                     .pipe(takeUntil(this._unsubscribeAll))
                     .subscribe((updatedMetadata) => {
-                        if (updatedMetadata && updatedMetadata.pubkey === publicKey) {
+                        if (
+                            updatedMetadata &&
+                            updatedMetadata.pubkey === publicKey
+                        ) {
                             this._profile.next(updatedMetadata.metadata);
                         }
                     });
@@ -206,14 +269,14 @@ export class ChatService implements OnDestroy {
 
     async getChats(): Promise<Observable<Chat[]>> {
         return this.getChatListStream().pipe(
-            tap(chats => {
+            tap((chats) => {
                 if (chats && chats.length === 0) {
                     return;
                 }
 
                 const pubKeys = chats
-                    .filter(chat => chat.contact?.pubKey)
-                    .map(chat => chat.contact!.pubKey);
+                    .filter((chat) => chat.contact?.pubKey)
+                    .map((chat) => chat.contact!.pubKey);
 
                 // Subscribe to all metadata updates in parallel
                 this.subscribeToRealTimeMetadataUpdatesBatch(pubKeys);
@@ -226,12 +289,19 @@ export class ChatService implements OnDestroy {
         const useExtension = await this._signerService.isUsingExtension();
         const useSecretKey = await this._signerService.isUsingSecretKey();
 
-        this.decryptedPrivateKey = useSecretKey ? await this._signerService.getDecryptedSecretKey() : '';
+        this.decryptedPrivateKey = useSecretKey
+            ? await this._signerService.getDecryptedSecretKey()
+            : '';
 
         // Perform metadata and chat loading in parallel for speed
         await Promise.all([
             this.updateChatListMetadata(),
-            this.subscribeToChatList(pubkey, useExtension, useSecretKey, this.decryptedPrivateKey)
+            this.subscribeToChatList(
+                pubkey,
+                useExtension,
+                useSecretKey,
+                this.decryptedPrivateKey
+            ),
         ]);
 
         return this.getChatListStream();
@@ -239,46 +309,80 @@ export class ChatService implements OnDestroy {
 
     private subscribeToRealTimeMetadataUpdatesBatch(pubKeys: string[]): void {
         // Batch subscribe to all pubKeys metadata updates for efficiency
-        pubKeys.forEach(pubKey => {
+        pubKeys.forEach((pubKey) => {
             this.subscribeToRealTimeMetadataUpdates(pubKey);
         });
     }
 
-    subscribeToChatList(pubkey: string, useExtension: boolean, useSecretKey: boolean, decryptedSenderPrivateKey: string): Observable<Chat[]> {
+    subscribeToChatList(
+        pubkey: string,
+        useExtension: boolean,
+        useSecretKey: boolean,
+        decryptedSenderPrivateKey: string
+    ): Observable<Chat[]> {
         this._relayService.ensureConnectedRelays().then(async () => {
             const filters: Filter[] = [
-                { kinds: [EncryptedDirectMessage], authors: [pubkey] , limit:1500},
-                { kinds: [EncryptedDirectMessage], '#p': [pubkey] , limit:1500}
+                {
+                    kinds: [EncryptedDirectMessage],
+                    authors: [pubkey],
+                    limit: 1500,
+                },
+                {
+                    kinds: [EncryptedDirectMessage],
+                    '#p': [pubkey],
+                    limit: 1500,
+                },
             ];
 
-            this._relayService.getPool().subscribeMany(this._relayService.getConnectedRelays(), filters, {
-                onevent: async (event: NostrEvent) => {
-                    const otherPartyPubKey = event.pubkey === pubkey
-                        ? event.tags.find(tag => tag[0] === 'p')?.[1] || ''
-                        : event.pubkey;
+            this._relayService
+                .getPool()
+                .subscribeMany(
+                    this._relayService.getConnectedRelays(),
+                    filters,
+                    {
+                        onevent: async (event: NostrEvent) => {
+                            const otherPartyPubKey =
+                                event.pubkey === pubkey
+                                    ? event.tags.find(
+                                          (tag) => tag[0] === 'p'
+                                      )?.[1] || ''
+                                    : event.pubkey;
 
-                    if (!otherPartyPubKey) return;
+                            if (!otherPartyPubKey) return;
 
-                    const lastTimestamp = this.latestMessageTimestamps[otherPartyPubKey] || 0;
-                    if (event.created_at > lastTimestamp) {
-                        this.messageQueue.push(event);
-                        this.processNextMessage(pubkey, useExtension, useSecretKey, decryptedSenderPrivateKey);
+                            const lastTimestamp =
+                                this.latestMessageTimestamps[
+                                    otherPartyPubKey
+                                ] || 0;
+                            if (event.created_at > lastTimestamp) {
+                                this.messageQueue.push(event);
+                                this.processNextMessage(
+                                    pubkey,
+                                    useExtension,
+                                    useSecretKey,
+                                    decryptedSenderPrivateKey
+                                );
+                            }
+                        },
+                        oneose: () => {
+                            const currentChats = this.chatList || [];
+                            if (currentChats.length > 0) {
+                                this._chats.next(this.chatList);
+                            }
+                        },
                     }
-                },
-                oneose: () => {
-
-                    const currentChats = this.chatList || [];
-                    if (currentChats.length > 0) {
-                        this._chats.next(this.chatList);
-                    }
-                }
-            });
+                );
         });
 
         return this.getChatListStream();
     }
 
-    private async processNextMessage(pubkey: string, useExtension: boolean, useSecretKey: boolean, decryptedSenderPrivateKey: string): Promise<void> {
+    private async processNextMessage(
+        pubkey: string,
+        useExtension: boolean,
+        useSecretKey: boolean,
+        decryptedSenderPrivateKey: string
+    ): Promise<void> {
         if (this.isDecrypting || this.messageQueue.length === 0) return;
 
         this.isDecrypting = true;
@@ -290,7 +394,7 @@ export class ChatService implements OnDestroy {
 
                 const isSentByUser = event.pubkey === pubkey;
                 const otherPartyPubKey = isSentByUser
-                    ? event.tags.find(tag => tag[0] === 'p')?.[1] || ''
+                    ? event.tags.find((tag) => tag[0] === 'p')?.[1] || ''
                     : event.pubkey;
 
                 if (!otherPartyPubKey) continue;
@@ -304,7 +408,12 @@ export class ChatService implements OnDestroy {
                 );
 
                 if (decryptedMessage) {
-                    this.addOrUpdateChatList(otherPartyPubKey, decryptedMessage, event.created_at, isSentByUser);
+                    this.addOrUpdateChatList(
+                        otherPartyPubKey,
+                        decryptedMessage,
+                        event.created_at,
+                        isSentByUser
+                    );
                 }
             }
         } catch (error) {
@@ -314,8 +423,15 @@ export class ChatService implements OnDestroy {
         }
     }
 
-    private addOrUpdateChatList(pubKey: string, message: string, createdAt: number, isMine: boolean): void {
-        const existingChat = this.chatList.find(chat => chat.contact?.pubKey === pubKey);
+    private addOrUpdateChatList(
+        pubKey: string,
+        message: string,
+        createdAt: number,
+        isMine: boolean
+    ): void {
+        const existingChat = this.chatList.find(
+            (chat) => chat.contact?.pubKey === pubKey
+        );
 
         const newMessage = {
             id: `${pubKey}-${createdAt}`,
@@ -327,11 +443,19 @@ export class ChatService implements OnDestroy {
         };
 
         if (existingChat) {
-            const messageExists = existingChat.messages?.some(m => m.id === newMessage.id);
+            const messageExists = existingChat.messages?.some(
+                (m) => m.id === newMessage.id
+            );
 
             if (!messageExists) {
-                existingChat.messages = [...(existingChat.messages || []), newMessage]
-                    .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+                existingChat.messages = [
+                    ...(existingChat.messages || []),
+                    newMessage,
+                ].sort(
+                    (a, b) =>
+                        new Date(a.createdAt).getTime() -
+                        new Date(b.createdAt).getTime()
+                );
 
                 if (Number(existingChat.lastMessageAt) < createdAt) {
                     existingChat.lastMessage = message;
@@ -339,25 +463,34 @@ export class ChatService implements OnDestroy {
                 }
             }
         } else {
-            const contactInfo = this._contacts.value?.find(contact => contact.pubKey === pubKey) || { pubKey };
+            const contactInfo = this._contacts.value?.find(
+                (contact) => contact.pubKey === pubKey
+            ) || { pubKey };
 
             const newChat: Chat = {
                 id: pubKey,
                 contact: {
                     pubKey: contactInfo.pubKey,
-                    name: contactInfo.name || "Unknown",
-                    picture: contactInfo.picture || "/images/avatars/avatar-placeholder.png",
-                    about: contactInfo.about || "",
-                    displayName: contactInfo.displayName || contactInfo.name || "Unknown"
+                    name: contactInfo.name || 'Unknown',
+                    picture:
+                        contactInfo.picture ||
+                        '/images/avatars/avatar-placeholder.png',
+                    about: contactInfo.about || '',
+                    displayName:
+                        contactInfo.displayName ||
+                        contactInfo.name ||
+                        'Unknown',
                 },
                 lastMessage: message,
                 lastMessageAt: createdAt.toString(),
-                messages: [newMessage]
+                messages: [newMessage],
             };
             this.chatList.push(newChat);
         }
 
-        this.chatList.sort((a, b) => Number(b.lastMessageAt!) - Number(a.lastMessageAt!));
+        this.chatList.sort(
+            (a, b) => Number(b.lastMessageAt!) - Number(a.lastMessageAt!)
+        );
         this._chats.next(this.chatList);
     }
 
@@ -373,9 +506,16 @@ export class ChatService implements OnDestroy {
         recipientPublicKey: string
     ): Promise<string> {
         if (useExtension && !useSecretKey) {
-            return await this._signerService.decryptMessageWithExtension(recipientPublicKey, event.content);
+            return await this._signerService.decryptMessageWithExtension(
+                recipientPublicKey,
+                event.content
+            );
         } else if (useSecretKey && !useExtension) {
-            return await this._signerService.decryptMessage(decryptedSenderPrivateKey, recipientPublicKey, event.content);
+            return await this._signerService.decryptMessage(
+                decryptedSenderPrivateKey,
+                recipientPublicKey,
+                event.content
+            );
         }
     }
 
@@ -383,83 +523,143 @@ export class ChatService implements OnDestroy {
         const myPubKey = this._signerService.getPublicKey();
 
         const historyFilter: Filter[] = [
-            { kinds: [EncryptedDirectMessage], authors: [myPubKey], '#p': [pubKey], limit: 10 },
-            { kinds: [EncryptedDirectMessage], authors: [pubKey], '#p': [myPubKey], limit: 10 }
+            {
+                kinds: [EncryptedDirectMessage],
+                authors: [myPubKey],
+                '#p': [pubKey],
+                limit: 10,
+            },
+            {
+                kinds: [EncryptedDirectMessage],
+                authors: [pubKey],
+                '#p': [myPubKey],
+                limit: 10,
+            },
         ];
 
-        this._relayService.getPool().subscribeMany(this._relayService.getConnectedRelays(), historyFilter, {
-            onevent: async (event: NostrEvent) => {
-                const isSentByMe = event.pubkey === myPubKey;
-                const senderOrRecipientPubKey = isSentByMe ? pubKey : event.pubkey;
-                const useExtension = await this._signerService.isUsingExtension();
-                const useSecretKey = await this._signerService.isUsingSecretKey();
-                const decryptedMessage = await this.decryptReceivedMessage(
-                    event,
-                    useExtension,
-                    useSecretKey,
-                    this.decryptedPrivateKey,
-                    senderOrRecipientPubKey
-                );
+        this._relayService
+            .getPool()
+            .subscribeMany(
+                this._relayService.getConnectedRelays(),
+                historyFilter,
+                {
+                    onevent: async (event: NostrEvent) => {
+                        const isSentByMe = event.pubkey === myPubKey;
+                        const senderOrRecipientPubKey = isSentByMe
+                            ? pubKey
+                            : event.pubkey;
+                        const useExtension =
+                            await this._signerService.isUsingExtension();
+                        const useSecretKey =
+                            await this._signerService.isUsingSecretKey();
+                        const decryptedMessage =
+                            await this.decryptReceivedMessage(
+                                event,
+                                useExtension,
+                                useSecretKey,
+                                this.decryptedPrivateKey,
+                                senderOrRecipientPubKey
+                            );
 
-                if (decryptedMessage) {
-                    const messageTimestamp = Math.floor(event.created_at);
+                        if (decryptedMessage) {
+                            const messageTimestamp = Math.floor(
+                                event.created_at
+                            );
 
-                    this.addOrUpdateChatList(pubKey, decryptedMessage, messageTimestamp, isSentByMe);
-                    this._chat.next(this.chatList.find(chat => chat.id === pubKey));
+                            this.addOrUpdateChatList(
+                                pubKey,
+                                decryptedMessage,
+                                messageTimestamp,
+                                isSentByMe
+                            );
+                            this._chat.next(
+                                this.chatList.find((chat) => chat.id === pubKey)
+                            );
+                        }
+                    },
+                    oneose: () => {},
                 }
-            },
-            oneose: () => {
-            }
-        });
+            );
     }
 
     private async fetchChatHistory(pubKey: string): Promise<any[]> {
         const myPubKey = this._signerService.getPublicKey();
 
         const historyFilter: Filter[] = [
-            { kinds: [EncryptedDirectMessage], authors: [myPubKey], '#p': [pubKey], limit: 10 },
-            { kinds: [EncryptedDirectMessage], authors: [pubKey], '#p': [myPubKey], limit: 10 }
+            {
+                kinds: [EncryptedDirectMessage],
+                authors: [myPubKey],
+                '#p': [pubKey],
+                limit: 10,
+            },
+            {
+                kinds: [EncryptedDirectMessage],
+                authors: [pubKey],
+                '#p': [myPubKey],
+                limit: 10,
+            },
         ];
 
         const messages: any[] = [];
 
-        this._relayService.getPool().subscribeMany(this._relayService.getConnectedRelays(), historyFilter, {
-            onevent: async (event: NostrEvent) => {
-                const isSentByMe = event.pubkey === myPubKey;
-                const senderOrRecipientPubKey = isSentByMe ? pubKey : event.pubkey;
-                const useExtension = await this._signerService.isUsingExtension();
-                const useSecretKey = await this._signerService.isUsingSecretKey();
-                const decryptedMessage = await this.decryptReceivedMessage(
-                    event,
-                    useExtension,
-                    useSecretKey,
-                    this.decryptedPrivateKey,
-                    senderOrRecipientPubKey
-                );
+        this._relayService
+            .getPool()
+            .subscribeMany(
+                this._relayService.getConnectedRelays(),
+                historyFilter,
+                {
+                    onevent: async (event: NostrEvent) => {
+                        const isSentByMe = event.pubkey === myPubKey;
+                        const senderOrRecipientPubKey = isSentByMe
+                            ? pubKey
+                            : event.pubkey;
+                        const useExtension =
+                            await this._signerService.isUsingExtension();
+                        const useSecretKey =
+                            await this._signerService.isUsingSecretKey();
+                        const decryptedMessage =
+                            await this.decryptReceivedMessage(
+                                event,
+                                useExtension,
+                                useSecretKey,
+                                this.decryptedPrivateKey,
+                                senderOrRecipientPubKey
+                            );
 
-                if (decryptedMessage) {
-                    const messageTimestamp = Math.floor(event.created_at);
+                        if (decryptedMessage) {
+                            const messageTimestamp = Math.floor(
+                                event.created_at
+                            );
 
-                    const message = {
-                        id: event.id,
-                        chatId: pubKey,
-                        contactId: senderOrRecipientPubKey,
-                        isMine: isSentByMe,
-                        value: decryptedMessage,
-                        createdAt: new Date(messageTimestamp * 1000).toISOString(),
-                    };
+                            const message = {
+                                id: event.id,
+                                chatId: pubKey,
+                                contactId: senderOrRecipientPubKey,
+                                isMine: isSentByMe,
+                                value: decryptedMessage,
+                                createdAt: new Date(
+                                    messageTimestamp * 1000
+                                ).toISOString(),
+                            };
 
-                    messages.push(message);
+                            messages.push(message);
 
-                    this.addOrUpdateChatList(pubKey, decryptedMessage, messageTimestamp, isSentByMe);
-                    this._chat.next(this.chatList.find(chat => chat.id === pubKey));
+                            this.addOrUpdateChatList(
+                                pubKey,
+                                decryptedMessage,
+                                messageTimestamp,
+                                isSentByMe
+                            );
+                            this._chat.next(
+                                this.chatList.find((chat) => chat.id === pubKey)
+                            );
+                        }
+                    },
+                    oneose: () => {},
                 }
-            },
-            oneose: () => {
-            }
-        });
+            );
 
-        await new Promise(resolve => setTimeout(resolve, 1000));
+        await new Promise((resolve) => setTimeout(resolve, 1000));
 
         return messages;
     }
@@ -484,10 +684,14 @@ export class ChatService implements OnDestroy {
 
                 event.id = getEventHash(event);
 
-                return from(this._relayService.publishEventToRelays(event)).pipe(
+                return from(
+                    this._relayService.publishEventToRelays(event)
+                ).pipe(
                     map(() => {
                         if (chats) {
-                            const index = chats.findIndex((item) => item.id === id);
+                            const index = chats.findIndex(
+                                (item) => item.id === id
+                            );
                             if (index !== -1) {
                                 chats[index] = chat;
                                 this._chats.next(chats);
@@ -496,7 +700,10 @@ export class ChatService implements OnDestroy {
                         return chat;
                     }),
                     catchError((error) => {
-                        console.error('Failed to update chat via Nostr:', error);
+                        console.error(
+                            'Failed to update chat via Nostr:',
+                            error
+                        );
                         return throwError(error);
                     })
                 );
@@ -516,7 +723,7 @@ export class ChatService implements OnDestroy {
                             return this.createNewChat(id, contact);
                         }
 
-                        const cachedChat = chats.find(chat => chat.id === id);
+                        const cachedChat = chats.find((chat) => chat.id === id);
                         if (cachedChat) {
                             this._chat.next(cachedChat);
                             this.loadChatHistory(this.recipientPublicKey);
@@ -534,8 +741,6 @@ export class ChatService implements OnDestroy {
         );
     }
 
-
-
     createNewChat(id: string, contact: Contact = null): Observable<Chat> {
         // const existingChat = this._chats.value?.find(chat => chat.id === id);
 
@@ -545,11 +750,21 @@ export class ChatService implements OnDestroy {
         const newChat: Chat = {
             id: id || '',
             contact: contact
-                ? { pubKey: contact.pubKey || id, name: contact.name || 'Unknown', picture: contact.picture || '/images/avatars/avatar-placeholder.png' }
-                : { pubKey: id, name: 'Unknown', picture: '/images/avatars/avatar-placeholder.png' },
+                ? {
+                      pubKey: contact.pubKey || id,
+                      name: contact.name || 'Unknown',
+                      picture:
+                          contact.picture ||
+                          '/images/avatars/avatar-placeholder.png',
+                  }
+                : {
+                      pubKey: id,
+                      name: 'Unknown',
+                      picture: '/images/avatars/avatar-placeholder.png',
+                  },
             lastMessage: 'new chat...',
             lastMessageAt: Math.floor(Date.now() / 1000).toString() || '0',
-            messages: []
+            messages: [],
         };
 
         // const updatedChats = this._chats.value ? [...this._chats.value, newChat] : [newChat];
@@ -559,10 +774,13 @@ export class ChatService implements OnDestroy {
             map((metadata: any) => {
                 newChat.contact = {
                     pubKey: id,
-                    name: metadata?.name || "Unknown",
-                    picture: metadata?.picture || "/images/avatars/avatar-placeholder.png",
-                    about: metadata?.about || "",
-                    displayName: metadata?.displayName || metadata?.name || "Unknown"
+                    name: metadata?.name || 'Unknown',
+                    picture:
+                        metadata?.picture ||
+                        '/images/avatars/avatar-placeholder.png',
+                    about: metadata?.about || '',
+                    displayName:
+                        metadata?.displayName || metadata?.name || 'Unknown',
                 };
 
                 return newChat;
@@ -576,8 +794,10 @@ export class ChatService implements OnDestroy {
                                 chatId: id,
                                 contactId: id,
                                 isMine: true,
-                                value: "new chat...",
-                                createdAt: Math.floor(Date.now() / 1000).toString(),
+                                value: 'new chat...',
+                                createdAt: Math.floor(
+                                    Date.now() / 1000
+                                ).toString(),
                             };
 
                             messages.push(testMessage);
@@ -591,7 +811,9 @@ export class ChatService implements OnDestroy {
                             newChat.lastMessageAt = lastMessage.createdAt;
                         }
 
-                        const updatedChatsWithMessages = this._chats.value ? [...this._chats.value, newChat] : [newChat];
+                        const updatedChatsWithMessages = this._chats.value
+                            ? [...this._chats.value, newChat]
+                            : [newChat];
                         this._chats.next(updatedChatsWithMessages);
                         this._chat.next(newChat);
 
@@ -602,14 +824,10 @@ export class ChatService implements OnDestroy {
         );
     }
 
-
-
-
     resetChat(): void {
         this._chat.next(null);
     }
 
-
     public async sendPrivateMessage(message: string): Promise<void> {
         try {
             this.message = message;
@@ -620,20 +838,31 @@ export class ChatService implements OnDestroy {
                 await this.handleMessageSendingWithExtension();
             } else if (!useExtension && useSecretKey) {
                 if (!this.isValidMessageSetup()) {
-                    console.error('Message, sender private key, or recipient public key is not properly set.');
+                    console.error(
+                        'Message, sender private key, or recipient public key is not properly set.'
+                    );
                     return;
                 }
-                const encryptedMessage = await this._signerService.encryptMessage(
-                    this.decryptedPrivateKey,
-                    this.recipientPublicKey,
-                    this.message
+                const encryptedMessage =
+                    await this._signerService.encryptMessage(
+                        this.decryptedPrivateKey,
+                        this.recipientPublicKey,
+                        this.message
+                    );
+
+                const messageEvent = this._signerService.getUnsignedEvent(
+                    4,
+                    [['p', this.recipientPublicKey]],
+                    encryptedMessage
                 );
 
-                const messageEvent = this._signerService.getUnsignedEvent(4, [['p', this.recipientPublicKey]], encryptedMessage);
+                const signedEvent = this._signerService.getSignedEvent(
+                    messageEvent,
+                    this.decryptedPrivateKey
+                );
 
-                const signedEvent = this._signerService.getSignedEvent(messageEvent, this.decryptedPrivateKey);
-
-                const published = await this._relayService.publishEventToRelays(signedEvent);
+                const published =
+                    await this._relayService.publishEventToRelays(signedEvent);
 
                 if (published) {
                     this.message = '';
@@ -641,7 +870,6 @@ export class ChatService implements OnDestroy {
                     console.error('Failed to send the message.');
                 }
             }
-
         } catch (error) {
             console.error('Error sending private message:', error);
         }
@@ -649,20 +877,23 @@ export class ChatService implements OnDestroy {
 
     private async handleMessageSendingWithExtension(): Promise<void> {
         try {
-            const encryptedMessage = await this._signerService.encryptMessageWithExtension(
-                this.message,
-                this.recipientPublicKey
-            );
+            const encryptedMessage =
+                await this._signerService.encryptMessageWithExtension(
+                    this.message,
+                    this.recipientPublicKey
+                );
 
-            const signedEvent = await this._signerService.signEventWithExtension({
-                kind: 4,
-                pubkey: this._signerService.getPublicKey(),
-                tags: [['p', this.recipientPublicKey]],
-                content: encryptedMessage,
-                created_at: Math.floor(Date.now() / 1000),
-            });
+            const signedEvent =
+                await this._signerService.signEventWithExtension({
+                    kind: 4,
+                    pubkey: this._signerService.getPublicKey(),
+                    tags: [['p', this.recipientPublicKey]],
+                    content: encryptedMessage,
+                    created_at: Math.floor(Date.now() / 1000),
+                });
 
-            const published = await this._relayService.publishEventToRelays(signedEvent);
+            const published =
+                await this._relayService.publishEventToRelays(signedEvent);
 
             if (published) {
                 this.message = '';
@@ -682,6 +913,4 @@ export class ChatService implements OnDestroy {
         this._unsubscribeAll.next();
         this._unsubscribeAll.complete();
     }
-
-
 }
diff --git a/src/app/components/chat/chats/chats.component.html b/src/app/components/chat/chats/chats.component.html
index f28af1e..7a7e3bc 100644
--- a/src/app/components/chat/chats/chats.component.html
+++ b/src/app/components/chat/chats/chats.component.html
@@ -1,16 +1,20 @@
 <div class="bg-card relative flex w-full flex-auto dark:bg-transparent">
     <mat-drawer-container class="h-full flex-auto" [hasBackdrop]="false">
         <!-- Drawer -->
-        <mat-drawer class="w-full dark:bg-gray-900 sm:w-100 lg:border-r lg:shadow-none" [autoFocus]="false"
-            [(opened)]="drawerOpened" #drawer>
+        <mat-drawer
+            class="w-full dark:bg-gray-900 sm:w-100 lg:border-r lg:shadow-none"
+            [autoFocus]="false"
+            [(opened)]="drawerOpened"
+            #drawer
+        >
             <!-- New chat -->
             @if (drawerComponent === 'new-chat') {
-            <chat-new-chat [drawer]="drawer"></chat-new-chat>
+                <chat-new-chat [drawer]="drawer"></chat-new-chat>
             }
 
             <!-- Profile -->
             @if (drawerComponent === 'profile') {
-            <chat-profile [drawer]="drawer"></chat-profile>
+                <chat-profile [drawer]="drawer"></chat-profile>
             }
         </mat-drawer>
 
@@ -18,180 +22,276 @@
         <mat-drawer-content class="flex overflow-hidden">
             <!-- Chats list -->
             @if (chats && chats.length > 0) {
-            <div
-                class="bg-card relative flex w-full min-w-0 flex-auto flex-col dark:bg-transparent lg:min-w-100 lg:max-w-100">
-                <!-- Header -->
-                <div class="flex flex-0 flex-col border-b bg-gray-50 px-8 py-4 dark:bg-transparent">
-                    <div class="flex items-center">
-                        <div class="mr-1 flex cursor-pointer items-center" (click)="openProfile()">
-                            <div class="h-10 w-10">
-                                @if (profile?.picture) {
-                                <img class="h-full w-full rounded-full object-cover" [src]="profile?.picture"
-                                    onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
-                                    alt="Profile picture" />
-                                }
-                                @if (!profile?.picture) {
-                                <div
-                                    class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                    {{ profile?.name?.charAt(0) }}
+                <div
+                    class="bg-card relative flex w-full min-w-0 flex-auto flex-col dark:bg-transparent lg:min-w-100 lg:max-w-100"
+                >
+                    <!-- Header -->
+                    <div
+                        class="flex flex-0 flex-col border-b bg-gray-50 px-8 py-4 dark:bg-transparent"
+                    >
+                        <div class="flex items-center">
+                            <div
+                                class="mr-1 flex cursor-pointer items-center"
+                                (click)="openProfile()"
+                            >
+                                <div class="h-10 w-10">
+                                    @if (profile?.picture) {
+                                        <img
+                                            class="h-full w-full rounded-full object-cover"
+                                            [src]="profile?.picture"
+                                            onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
+                                            alt="Profile picture"
+                                        />
+                                    }
+                                    @if (!profile?.picture) {
+                                        <div
+                                            class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                                        >
+                                            {{ profile?.name?.charAt(0) }}
+                                        </div>
+                                    }
+                                </div>
+                                <div class="ml-4 truncate font-medium">
+                                    {{ profile?.name }}
                                 </div>
-                                }
                             </div>
-                            <div class="ml-4 truncate font-medium">
-                                {{ profile?.name }}
-                            </div>
-                        </div>
-                        <button class="ml-auto" mat-icon-button (click)="openNewChat()">
-                            <mat-icon [svgIcon]="'heroicons_outline:plus-circle'"></mat-icon>
-                        </button>
-                        <button class="-mr-4 ml-1" mat-icon-button [matMenuTriggerFor]="chatsHeaderMenu">
-                            <mat-icon [svgIcon]="
+                            <button
+                                class="ml-auto"
+                                mat-icon-button
+                                (click)="openNewChat()"
+                            >
+                                <mat-icon
+                                    [svgIcon]="'heroicons_outline:plus-circle'"
+                                ></mat-icon>
+                            </button>
+                            <button
+                                class="-mr-4 ml-1"
+                                mat-icon-button
+                                [matMenuTriggerFor]="chatsHeaderMenu"
+                            >
+                                <mat-icon
+                                    [svgIcon]="
                                         'heroicons_outline:ellipsis-vertical'
-                                    "></mat-icon>
-                            <mat-menu #chatsHeaderMenu>
-                                <button mat-menu-item>
-                                    <mat-icon [svgIcon]="
+                                    "
+                                ></mat-icon>
+                                <mat-menu #chatsHeaderMenu>
+                                    <button mat-menu-item>
+                                        <mat-icon
+                                            [svgIcon]="
                                                 'heroicons_outline:user-group'
-                                            "></mat-icon>
-                                    New group
-                                </button>
-                                <button mat-menu-item>
-                                    <mat-icon [svgIcon]="
+                                            "
+                                        ></mat-icon>
+                                        New group
+                                    </button>
+                                    <button mat-menu-item>
+                                        <mat-icon
+                                            [svgIcon]="
                                                 'heroicons_outline:chat-bubble-left-right'
-                                            "></mat-icon>
-                                    Create a room
-                                </button>
-                                <button mat-menu-item (click)="openProfile()">
-                                    <mat-icon [svgIcon]="
+                                            "
+                                        ></mat-icon>
+                                        Create a room
+                                    </button>
+                                    <button
+                                        mat-menu-item
+                                        (click)="openProfile()"
+                                    >
+                                        <mat-icon
+                                            [svgIcon]="
                                                 'heroicons_outline:user-circle'
-                                            "></mat-icon>
-                                    Profile
-                                </button>
-                                <button mat-menu-item>
-                                    <mat-icon [svgIcon]="
+                                            "
+                                        ></mat-icon>
+                                        Profile
+                                    </button>
+                                    <button mat-menu-item>
+                                        <mat-icon
+                                            [svgIcon]="
                                                 'heroicons_outline:archive-box'
-                                            "></mat-icon>
-                                    Archived
-                                </button>
-                                <button mat-menu-item>
-                                    <mat-icon [svgIcon]="'heroicons_outline:star'"></mat-icon>
-                                    Starred
-                                </button>
-                                <button mat-menu-item>
-                                    <mat-icon [svgIcon]="
+                                            "
+                                        ></mat-icon>
+                                        Archived
+                                    </button>
+                                    <button mat-menu-item>
+                                        <mat-icon
+                                            [svgIcon]="'heroicons_outline:star'"
+                                        ></mat-icon>
+                                        Starred
+                                    </button>
+                                    <button mat-menu-item>
+                                        <mat-icon
+                                            [svgIcon]="
                                                 'heroicons_outline:cog-8-tooth'
-                                            "></mat-icon>
-                                    Settings
-                                </button>
-                            </mat-menu>
-                        </button>
-                    </div>
-                    <!-- Search -->
-                    <div class="mt-4">
-                        <mat-form-field class="angor-mat-rounded angor-mat-dense w-full" [subscriptSizing]="'dynamic'">
-                            <mat-icon matPrefix class="icon-size-5" [svgIcon]="
+                                            "
+                                        ></mat-icon>
+                                        Settings
+                                    </button>
+                                </mat-menu>
+                            </button>
+                        </div>
+                        <!-- Search -->
+                        <div class="mt-4">
+                            <mat-form-field
+                                class="angor-mat-rounded angor-mat-dense w-full"
+                                [subscriptSizing]="'dynamic'"
+                            >
+                                <mat-icon
+                                    matPrefix
+                                    class="icon-size-5"
+                                    [svgIcon]="
                                         'heroicons_solid:magnifying-glass'
-                                    "></mat-icon>
-                            <input matInput [autocomplete]="'off'" [placeholder]="'Search or start new chat'"
-                                (input)="filterChats(searchField.value)" #searchField />
-                        </mat-form-field>
+                                    "
+                                ></mat-icon>
+                                <input
+                                    matInput
+                                    [autocomplete]="'off'"
+                                    [placeholder]="'Search or start new chat'"
+                                    (input)="filterChats(searchField.value)"
+                                    #searchField
+                                />
+                            </mat-form-field>
+                        </div>
                     </div>
-                </div>
 
-                <!-- Chats -->
-                <div class="flex-auto overflow-y-auto">
-                    @if (filteredChats.length > 0) {
-                    @for (
-                    chat of filteredChats;
-                    track trackByFn($index, chat)
-                    ) {
-                    <a class="z-20 flex cursor-pointer items-center border-b px-8 py-5" [ngClass]="{
+                    <!-- Chats -->
+                    <div class="flex-auto overflow-y-auto">
+                        @if (filteredChats.length > 0) {
+                            @for (
+                                chat of filteredChats;
+                                track trackByFn($index, chat)
+                            ) {
+                                <a
+                                    class="z-20 flex cursor-pointer items-center border-b px-8 py-5"
+                                    [ngClass]="{
                                         'dark:hover:bg-hover hover:bg-gray-100':
                                             !selectedChat ||
                                             selectedChat.id !== chat.id,
                                         'bg-primary-50 dark:bg-hover':
                                             selectedChat &&
                                             selectedChat.id === chat.id,
-                                    }" [routerLink]="[chat.id]">
-                        <div class="relative flex h-10 w-10 flex-0 items-center justify-center">
-                            @if (chat.unreadCount > 0) {
-                            <div class="ring-bg-card absolute bottom-0 right-0 -ml-0.5 h-2 w-2 flex-0 rounded-full bg-primary text-on-primary ring-2 dark:bg-primary-500 dark:ring-gray-900"
-                                [class.ring-primary-50]="
+                                    }"
+                                    [routerLink]="[chat.id]"
+                                >
+                                    <div
+                                        class="relative flex h-10 w-10 flex-0 items-center justify-center"
+                                    >
+                                        @if (chat.unreadCount > 0) {
+                                            <div
+                                                class="ring-bg-card absolute bottom-0 right-0 -ml-0.5 h-2 w-2 flex-0 rounded-full bg-primary text-on-primary ring-2 dark:bg-primary-500 dark:ring-gray-900"
+                                                [class.ring-primary-50]="
                                                     selectedChat &&
                                                     selectedChat.id === chat.id
-                                                "></div>
-                            }
-                            <!-- If contact has a picture -->
-                            <img *ngIf="chat.contact?.picture" class="h-full w-full rounded-full object-cover"
-                                [src]="chat.contact?.picture" (error)="
+                                                "
+                                            ></div>
+                                        }
+                                        <!-- If contact has a picture -->
+                                        <img
+                                            *ngIf="chat.contact?.picture"
+                                            class="h-full w-full rounded-full object-cover"
+                                            [src]="chat.contact?.picture"
+                                            (error)="
                                                 this.src =
                                                     '/images/avatars/avatar-placeholder.png'
-                                            " alt="Contact picture" />
+                                            "
+                                            alt="Contact picture"
+                                        />
 
-                            <!-- If contact doesn't have a picture, display the first letter of the name -->
-                            <div *ngIf="!chat.contact?.picture"
-                                class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                {{ chat.contact?.name?.charAt(0) }}
-                            </div>
-                        </div>
-                        <div class="ml-4 min-w-0">
-                            <div class="truncate font-medium leading-5">
-                                {{ chat.contact?.name }}
-                            </div>
-                            <div class="text-secondary truncate leading-5" [class.text-primary]="
+                                        <!-- If contact doesn't have a picture, display the first letter of the name -->
+                                        <div
+                                            *ngIf="!chat.contact?.picture"
+                                            class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                                        >
+                                            {{ chat.contact?.name?.charAt(0) }}
+                                        </div>
+                                    </div>
+                                    <div class="ml-4 min-w-0">
+                                        <div
+                                            class="truncate font-medium leading-5"
+                                        >
+                                            {{ chat.contact?.name }}
+                                        </div>
+                                        <div
+                                            class="text-secondary truncate leading-5"
+                                            [class.text-primary]="
                                                 chat.unreadCount > 0
-                                            " [class.dark:text-primary-500]="
+                                            "
+                                            [class.dark:text-primary-500]="
                                                 chat.unreadCount > 0
-                                            ">
-                                {{ chat.lastMessage | checkmessage}}
-                            </div>
-                        </div>
-                        <div class="ml-auto flex flex-col items-end self-start pl-2">
-                            <div class="text-secondary overflow-hidden whitespace-nowrap text-sm leading-5">
-                                {{ chat.lastMessageAt | ago }}
-                            </div>
-                            @if (chat.muted) {
-                            <mat-icon class="text-hint icon-size-5" [svgIcon]="
+                                            "
+                                        >
+                                            {{
+                                                chat.lastMessage | checkmessage
+                                            }}
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="ml-auto flex flex-col items-end self-start pl-2"
+                                    >
+                                        <div
+                                            class="text-secondary overflow-hidden whitespace-nowrap text-sm leading-5"
+                                        >
+                                            {{ chat.lastMessageAt | ago }}
+                                        </div>
+                                        @if (chat.muted) {
+                                            <mat-icon
+                                                class="text-hint icon-size-5"
+                                                [svgIcon]="
                                                     'heroicons_solid:speaker-x-mark'
-                                                "></mat-icon>
+                                                "
+                                            ></mat-icon>
+                                        }
+                                    </div>
+                                </a>
                             }
-                        </div>
-                    </a>
-                    }
-                    } @else {
-                    <div class="flex h-full flex-auto flex-col items-center justify-center">
-                        <mat-icon class="icon-size-24" [svgIcon]="
+                        } @else {
+                            <div
+                                class="flex h-full flex-auto flex-col items-center justify-center"
+                            >
+                                <mat-icon
+                                    class="icon-size-24"
+                                    [svgIcon]="
                                         'heroicons_outline:chat-bubble-oval-left-ellipsis'
-                                    "></mat-icon>
-                        <div class="text-secondary mt-4 text-2xl font-semibold tracking-tight">
-                            No chats
-                        </div>
+                                    "
+                                ></mat-icon>
+                                <div
+                                    class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
+                                >
+                                    No chats
+                                </div>
+                            </div>
+                        }
                     </div>
-                    }
                 </div>
-            </div>
             } @else {
-            <div class="flex h-full flex-auto flex-col items-center justify-center">
-                <mat-icon class="icon-size-24" [svgIcon]="
+                <div
+                    class="flex h-full flex-auto flex-col items-center justify-center"
+                >
+                    <mat-icon
+                        class="icon-size-24"
+                        [svgIcon]="
                             'heroicons_outline:chat-bubble-oval-left-ellipsis'
-                        "></mat-icon>
-                <div class="text-secondary mt-4 text-2xl font-semibold tracking-tight">
-                    No chats
+                        "
+                    ></mat-icon>
+                    <div
+                        class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
+                    >
+                        No chats
+                    </div>
                 </div>
-            </div>
             }
 
             <!-- No chats template -->
 
             <!-- Conversation -->
             @if (chats && chats.length > 0) {
-            <div class="flex-auto border-l" [ngClass]="{
+                <div
+                    class="flex-auto border-l"
+                    [ngClass]="{
                         'absolute inset-0 z-20 flex lg:static lg:inset-auto':
                             selectedChat && selectedChat.id,
                         'hidden lg:flex': !selectedChat || !selectedChat.id,
-                    }">
-                <router-outlet></router-outlet>
-            </div>
+                    }"
+                >
+                    <router-outlet></router-outlet>
+                </div>
             }
         </mat-drawer-content>
     </mat-drawer-container>
diff --git a/src/app/components/chat/chats/chats.component.ts b/src/app/components/chat/chats/chats.component.ts
index 9834b15..3e174fe 100644
--- a/src/app/components/chat/chats/chats.component.ts
+++ b/src/app/components/chat/chats/chats.component.ts
@@ -14,13 +14,13 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';
-import { catchError, of, Subject, takeUntil } from 'rxjs';
+import { AgoPipe } from 'app/shared/pipes/ago.pipe';
+import { CheckmessagePipe } from 'app/shared/pipes/checkmessage.pipe';
+import { Subject, takeUntil } from 'rxjs';
 import { ChatService } from '../chat.service';
 import { Chat, Profile } from '../chat.types';
 import { NewChatComponent } from '../new-chat/new-chat.component';
 import { ProfileComponent } from '../profile/profile.component';
-import { AgoPipe } from 'app/shared/pipes/ago.pipe';
-import { CheckmessagePipe } from 'app/shared/pipes/checkmessage.pipe';
 
 @Component({
     selector: 'chat-chats',
@@ -42,7 +42,7 @@ import { CheckmessagePipe } from 'app/shared/pipes/checkmessage.pipe';
         RouterOutlet,
         AgoPipe,
         CommonModule,
-        CheckmessagePipe
+        CheckmessagePipe,
     ],
 })
 export class ChatsComponent implements OnInit, OnDestroy {
@@ -67,9 +67,8 @@ export class ChatsComponent implements OnInit, OnDestroy {
     constructor(
         private _chatService: ChatService,
         private _changeDetectorRef: ChangeDetectorRef,
-        private route: ActivatedRoute,
-
-    ) { }
+        private route: ActivatedRoute
+    ) {}
 
     /**
      * Angular lifecycle hook (ngOnInit) for component initialization.
@@ -100,7 +99,7 @@ export class ChatsComponent implements OnInit, OnDestroy {
                 this._markForCheck();
             });
 
-         this._chatService.InitSubscribeToChatList();
+        this._chatService.InitSubscribeToChatList();
 
         const savedChatId = localStorage.getItem('currentChatId');
 
@@ -128,7 +127,7 @@ export class ChatsComponent implements OnInit, OnDestroy {
             this.filteredChats = this.chats;
         } else {
             const lowerCaseQuery = query.toLowerCase();
-            this.filteredChats = this.chats.filter(chat =>
+            this.filteredChats = this.chats.filter((chat) =>
                 chat.contact?.name.toLowerCase().includes(lowerCaseQuery)
             );
         }
@@ -169,6 +168,4 @@ export class ChatsComponent implements OnInit, OnDestroy {
     private _markForCheck(): void {
         this._changeDetectorRef.markForCheck();
     }
-
-
 }
diff --git a/src/app/components/chat/contact-info/contact-info.component.html b/src/app/components/chat/contact-info/contact-info.component.html
index 3869651..6cdcb39 100644
--- a/src/app/components/chat/contact-info/contact-info.component.html
+++ b/src/app/components/chat/contact-info/contact-info.component.html
@@ -29,12 +29,14 @@
                     </div>
                 }
             </div>
-            <div class="mt-4 text-lg font-medium">{{ chat.contact?.name }}</div>
-            <div class="text-secondary mt-0.5 text-md">
+            <div class="mt-4 text-lg font-medium">
+                <a [routerLink]="['/profile', chat.contact?.pubKey]">
+                    {{ chat.contact?.name }}
+                </a>
+            </div>
+            <div class="text-secondary ml-4 mr-4 mt-0.5 text-md">
                 {{ chat.contact?.about }}
             </div>
         </div>
-
-
     </div>
 </div>
diff --git a/src/app/components/chat/contact-info/contact-info.component.ts b/src/app/components/chat/contact-info/contact-info.component.ts
index bdfe17f..7f36775 100644
--- a/src/app/components/chat/contact-info/contact-info.component.ts
+++ b/src/app/components/chat/contact-info/contact-info.component.ts
@@ -7,15 +7,16 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDrawer } from '@angular/material/sidenav';
+import { RouterModule } from '@angular/router';
 import { Chat } from '../chat.types';
- 
+
 @Component({
     selector: 'chat-contact-info',
     templateUrl: './contact-info.component.html',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [MatButtonModule, MatIconModule],
+    imports: [MatButtonModule, MatIconModule, RouterModule],
 })
 export class ContactInfoComponent {
     @Input() chat: Chat;
diff --git a/src/app/components/chat/conversation/conversation.component.css b/src/app/components/chat/conversation/conversation.component.css
index 029551f..a0a8099 100644
--- a/src/app/components/chat/conversation/conversation.component.css
+++ b/src/app/components/chat/conversation/conversation.component.css
@@ -1,7 +1,8 @@
-.c-img{
-    max-width: 100%; border-radius: 10px;
+.c-img {
+    max-width: 100%;
+    border-radius: 10px;
 }
-.c-video
-{
-    max-width: 100%; border-radius: 10px;
+.c-video {
+    max-width: 100%;
+    border-radius: 10px;
 }
diff --git a/src/app/components/chat/conversation/conversation.component.html b/src/app/components/chat/conversation/conversation.component.html
index e96c2d6..16cf06f 100644
--- a/src/app/components/chat/conversation/conversation.component.html
+++ b/src/app/components/chat/conversation/conversation.component.html
@@ -176,33 +176,44 @@
                                 >
                                     <!-- Bubble -->
                                     <div
-                                    class="relative max-w-3/4 rounded-lg px-2 py-2"
-                                    [ngClass]="{
-                                        'bg-gray-400 text-blue-50': message.isMine,
-                                        'bg-gray-500 text-gray-50': !message.isMine
-                                    }"
-                                >
-                                    <!-- Speech bubble tail -->
-                                    @if (
-                                        last ||
-                                        chat.messages[i + 1].isMine !== message.isMine
-                                    ) {
+                                        class="relative max-w-3/4 rounded-lg px-2 py-2"
+                                        [ngClass]="{
+                                            'bg-gray-400 text-blue-50':
+                                                message.isMine,
+                                            'bg-gray-500 text-gray-50':
+                                                !message.isMine,
+                                        }"
+                                    >
+                                        <!-- Speech bubble tail -->
+                                        @if (
+                                            last ||
+                                            chat.messages[i + 1].isMine !==
+                                                message.isMine
+                                        ) {
+                                            <div
+                                                class="absolute bottom-0 w-3"
+                                                [ngClass]="{
+                                                    '-right-1 -mr-px mb-px text-gray-400':
+                                                        message.isMine,
+                                                    '-left-1 -ml-px mb-px -scale-x-1 text-gray-500':
+                                                        !message.isMine,
+                                                }"
+                                            >
+                                                <ng-container
+                                                    *ngTemplateOutlet="
+                                                        speechBubbleExtension
+                                                    "
+                                                ></ng-container>
+                                            </div>
+                                        }
+                                        <!-- Message -->
                                         <div
-                                            class="absolute bottom-0 w-3"
-                                            [ngClass]="{
-                                                '-right-1 -mr-px mb-px text-gray-400': message.isMine,
-                                                '-left-1 -ml-px mb-px -scale-x-1 text-gray-500': !message.isMine
-                                            }"
-                                        >
-                                            <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
-                                        </div>
-                                    }
-                                    <!-- Message -->
-                                    <div
-                                        class="min-w-4 leading-5 break-words whitespace-normal"
-                                        [innerHTML]="parseContent(message.value)"
-                                    ></div>
-                                </div>
+                                            class="min-w-4 whitespace-normal break-words leading-5"
+                                            [innerHTML]="
+                                                parseContent(message.value)
+                                            "
+                                        ></div>
+                                    </div>
 
                                     <!-- Time -->
                                     @if (
@@ -237,7 +248,7 @@
                     class="flex items-end border-t bg-gray-50 p-4 dark:bg-transparent"
                 >
                     <div class="my-px flex h-11 items-center">
-                         <button mat-icon-button (click)="openGifDialog()">
+                        <button mat-icon-button (click)="openGifDialog()">
                             <mat-icon
                                 [svgIcon]="'heroicons_outline:gif'"
                             ></mat-icon>
diff --git a/src/app/components/chat/conversation/conversation.component.ts b/src/app/components/chat/conversation/conversation.component.ts
index d313e50..d960145 100644
--- a/src/app/components/chat/conversation/conversation.component.ts
+++ b/src/app/components/chat/conversation/conversation.component.ts
@@ -1,5 +1,11 @@
+import { AngorMediaWatcherService } from '@angor/services/media-watcher';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import { CommonModule, DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import {
+    CommonModule,
+    DatePipe,
+    NgClass,
+    NgTemplateOutlet,
+} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -19,17 +25,16 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { RouterLink } from '@angular/router';
-import { AngorMediaWatcherService } from '@angor/services/media-watcher';
 
-import { Subject, takeUntil } from 'rxjs';
-import { ContactInfoComponent } from '../contact-info/contact-info.component';
-import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
-import { ChatService } from '../chat.service';
-import { PickerComponent } from '@ctrl/ngx-emoji-mart';
 import { AngorConfigService } from '@angor/services/config';
-import { GifDialogComponent } from 'app/shared/gif-dialog/gif-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { PickerComponent } from '@ctrl/ngx-emoji-mart';
+import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
+import { GifDialogComponent } from 'app/shared/gif-dialog/gif-dialog.component';
+import { Subject, takeUntil } from 'rxjs';
+import { ChatService } from '../chat.service';
+import { ContactInfoComponent } from '../contact-info/contact-info.component';
 
 @Component({
     selector: 'chat-conversation',
@@ -52,7 +57,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
         TextFieldModule,
         DatePipe,
         PickerComponent,
-        CommonModule
+        CommonModule,
     ],
 })
 export class ConversationComponent implements OnInit, OnDestroy {
@@ -68,7 +73,6 @@ export class ConversationComponent implements OnInit, OnDestroy {
     isListening: boolean = false;
     userEdited: boolean = false;
 
-
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _chatService: ChatService,
@@ -78,11 +82,15 @@ export class ConversationComponent implements OnInit, OnDestroy {
         public dialog: MatDialog,
         private sanitizer: DomSanitizer
     ) {
-        const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+        const SpeechRecognition =
+            (window as any).SpeechRecognition ||
+            (window as any).webkitSpeechRecognition;
 
         if (!SpeechRecognition) {
-          console.error('Speech recognition is not supported in this browser.');
-          return;
+            console.error(
+                'Speech recognition is not supported in this browser.'
+            );
+            return;
         }
         this.recognition = new SpeechRecognition();
         this.recognition.lang = 'en-US';
@@ -91,41 +99,35 @@ export class ConversationComponent implements OnInit, OnDestroy {
         this.setupRecognitionEvents();
     }
 
-
-
     openGifDialog(): void {
-      const dialogRef = this.dialog.open(GifDialogComponent, {
-        width: '600px',
-        maxHeight: '80vh',
-        data: { apiKey: 'LIVDSRZULELA' }
-      });
+        const dialogRef = this.dialog.open(GifDialogComponent, {
+            width: '600px',
+            maxHeight: '80vh',
+            data: { apiKey: 'LIVDSRZULELA' },
+        });
 
-      dialogRef.afterClosed().subscribe(result => {
-        if (result) {
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                const messageContent = result;
 
-          const messageContent = result
-
-          if (messageContent) {
-
-            this.messageInput.nativeElement.value = '';
-            this._chatService.sendPrivateMessage(messageContent)
-                .then(() => {
+                if (messageContent) {
                     this.messageInput.nativeElement.value = '';
+                    this._chatService
+                        .sendPrivateMessage(messageContent)
+                        .then(() => {
+                            this.messageInput.nativeElement.value = '';
+                            this.finalTranscript = '';
+                        })
+                        .catch((error) => {
+                            console.error('Failed to send message:', error);
+                        });
                     this.finalTranscript = '';
-                })
-                .catch((error) => {
-                    console.error('Failed to send message:', error);
-                });
-            this.finalTranscript = '';
-            this.userEdited = false;
-        }
-
-
-        }
-      });
+                    this.userEdited = false;
+                }
+            }
+        });
     }
 
-
     ngOnInit(): void {
         this._angorConfigService.config$.subscribe((config) => {
             if (config.scheme === 'auto') {
@@ -140,22 +142,18 @@ export class ConversationComponent implements OnInit, OnDestroy {
             .subscribe((chat: Chat) => {
                 this.chat = chat;
 
-
                 this._changeDetectorRef.markForCheck();
             });
 
-
         this._angorMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(({ matchingAliases }) => {
-
                 if (matchingAliases.includes('lg')) {
                     this.drawerMode = 'side';
                 } else {
                     this.drawerMode = 'over';
                 }
 
-
                 this._changeDetectorRef.markForCheck();
             });
     }
@@ -163,50 +161,50 @@ export class ConversationComponent implements OnInit, OnDestroy {
     parseContent(content: string): SafeHtml {
         const urlRegex = /(https?:\/\/[^\s]+)/g;
         const cleanedContent = content.replace(/["]+/g, '');
-        const parsedContent = cleanedContent.replace(urlRegex, (url) => {
-          if (url.match(/\.(jpeg|jpg|gif|png|bmp|svg|webp|tiff)$/) != null) {
-            return `<img src="${url}" alt="Image" width="100%" class="c-img">`;
-          } else if (url.match(/\.(mp4|webm)$/) != null) {
-            return `<video controls width="100%" class="c-video"><source src="${url}" type="video/mp4">Your browser does not support the video tag.</video>`;
-          } else if (url.match(/(youtu\.be\/|youtube\.com\/watch\?v=)/)) {
-            let videoId;
-            if (url.includes('youtu.be/')) {
-              videoId = url.split('youtu.be/')[1];
-            } else if (url.includes('watch?v=')) {
-              const urlParams = new URLSearchParams(url.split('?')[1]);
-              videoId = urlParams.get('v');
-            }
-            return `<iframe width="100%" class="c-video" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`;
-          } else {
-            return `<a href="${url}" target="_blank">${url}</a>`;
-          }
-        }).replace(/\n/g, '<br>');
+        const parsedContent = cleanedContent
+            .replace(urlRegex, (url) => {
+                if (
+                    url.match(/\.(jpeg|jpg|gif|png|bmp|svg|webp|tiff)$/) != null
+                ) {
+                    return `<img src="${url}" alt="Image" width="100%" class="c-img">`;
+                } else if (url.match(/\.(mp4|webm)$/) != null) {
+                    return `<video controls width="100%" class="c-video"><source src="${url}" type="video/mp4">Your browser does not support the video tag.</video>`;
+                } else if (url.match(/(youtu\.be\/|youtube\.com\/watch\?v=)/)) {
+                    let videoId;
+                    if (url.includes('youtu.be/')) {
+                        videoId = url.split('youtu.be/')[1];
+                    } else if (url.includes('watch?v=')) {
+                        const urlParams = new URLSearchParams(
+                            url.split('?')[1]
+                        );
+                        videoId = urlParams.get('v');
+                    }
+                    return `<iframe width="100%" class="c-video" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`;
+                } else {
+                    return `<a href="${url}" target="_blank">${url}</a>`;
+                }
+            })
+            .replace(/\n/g, '<br>');
 
         return this.sanitizer.bypassSecurityTrustHtml(parsedContent);
-      }
+    }
 
     @HostListener('input')
     @HostListener('ngModelChange')
     private _resizeMessageInput(): void {
-
         this._ngZone.runOutsideAngular(() => {
             setTimeout(() => {
-
                 this.messageInput.nativeElement.style.height = 'auto';
 
-
                 this._changeDetectorRef.detectChanges();
 
-
                 this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
 
-
                 this._changeDetectorRef.detectChanges();
             });
         });
     }
 
-
     setupRecognitionEvents(): void {
         this.recognition.onresult = (event: any) => {
             let interimTranscript = '';
@@ -220,9 +218,9 @@ export class ConversationComponent implements OnInit, OnDestroy {
                 }
             }
 
-
             if (!this.userEdited) {
-                this.messageInput.nativeElement.value = this.finalTranscript + interimTranscript;
+                this.messageInput.nativeElement.value =
+                    this.finalTranscript + interimTranscript;
             }
         };
 
@@ -235,7 +233,6 @@ export class ConversationComponent implements OnInit, OnDestroy {
         };
     }
 
-
     toggleSpeechRecognition(): void {
         this.finalTranscript = '';
         if (this.isListening) {
@@ -248,43 +245,32 @@ export class ConversationComponent implements OnInit, OnDestroy {
         }
     }
 
-
     handleUserInput(event: Event): void {
         this.userEdited = true;
     }
 
-
-
     ngOnDestroy(): void {
-
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 
-
     openContactInfo(): void {
-
         this.drawerOpened = true;
 
-
         this._changeDetectorRef.markForCheck();
     }
 
     resetChat(): void {
         this._chatService.resetChat();
 
-
         this.drawerOpened = false;
 
-
         this._changeDetectorRef.markForCheck();
     }
 
     toggleMuteNotifications(): void {
-
         this.chat.muted = !this.chat.muted;
 
-
         this._chatService.updateChat(this.chat.id, this.chat).subscribe();
     }
 
@@ -292,9 +278,10 @@ export class ConversationComponent implements OnInit, OnDestroy {
         return item.id || index;
     }
 
-
     detectSystemTheme() {
-        const darkSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+        const darkSchemeMedia = window.matchMedia(
+            '(prefers-color-scheme: dark)'
+        );
         this.darkMode = darkSchemeMedia.matches;
 
         darkSchemeMedia.addEventListener('change', (event) => {
@@ -312,10 +299,10 @@ export class ConversationComponent implements OnInit, OnDestroy {
     sendMessage(): void {
         const messageContent = this.messageInput.nativeElement.value.trim();
 
-         if (messageContent) {
-
+        if (messageContent) {
             this.messageInput.nativeElement.value = '';
-            this._chatService.sendPrivateMessage(messageContent)
+            this._chatService
+                .sendPrivateMessage(messageContent)
                 .then(() => {
                     this.messageInput.nativeElement.value = '';
                     this.finalTranscript = '';
@@ -336,5 +323,4 @@ export class ConversationComponent implements OnInit, OnDestroy {
     toggleEmojiPicker() {
         this.showEmojiPicker = !this.showEmojiPicker;
     }
-
 }
diff --git a/src/app/components/chat/new-chat/new-chat.component.html b/src/app/components/chat/new-chat/new-chat.component.html
index 645c053..954ad49 100644
--- a/src/app/components/chat/new-chat/new-chat.component.html
+++ b/src/app/components/chat/new-chat/new-chat.component.html
@@ -27,7 +27,8 @@
                 ) {
                     <div
                         class="text-secondary sticky top-0 z-10 -mt-px border-b border-t bg-gray-100 px-6 py-1 font-medium uppercase dark:bg-gray-900 md:px-8"
-                        (click)="openChat(contact)">
+                        (click)="openChat(contact)"
+                    >
                         {{ contact.name.charAt(0) }}
                     </div>
                 }
@@ -35,7 +36,7 @@
                 <div
                     class="z-20 flex cursor-pointer items-center border-b px-6 py-4 dark:hover:bg-hover hover:bg-gray-100 md:px-8"
                     (click)="openChat(contact)"
-                    >
+                >
                     <div
                         class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full"
                     >
diff --git a/src/app/components/chat/new-chat/new-chat.component.ts b/src/app/components/chat/new-chat/new-chat.component.ts
index fd779d9..d05efd9 100644
--- a/src/app/components/chat/new-chat/new-chat.component.ts
+++ b/src/app/components/chat/new-chat/new-chat.component.ts
@@ -9,10 +9,10 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDrawer } from '@angular/material/sidenav';
-import { Subject, takeUntil } from 'rxjs';
-import { Contact } from '../chat.types';
-import { ChatService } from '../chat.service';
 import { Router } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
+import { ChatService } from '../chat.service';
+import { Contact } from '../chat.types';
 
 @Component({
     selector: 'chat-new-chat',
@@ -30,8 +30,10 @@ export class NewChatComponent implements OnInit, OnDestroy {
     /**
      * Constructor
      */
-    constructor(private _chatService: ChatService, private router: Router) {}
-
+    constructor(
+        private _chatService: ChatService,
+        private router: Router
+    ) {}
 
     ngOnInit(): void {
         // Contacts
@@ -42,14 +44,12 @@ export class NewChatComponent implements OnInit, OnDestroy {
             });
     }
 
-
     ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 
-
     trackByFn(index: number, item: any): any {
         return item.id || index;
     }
@@ -65,8 +65,7 @@ export class NewChatComponent implements OnInit, OnDestroy {
             },
             complete: () => {
                 this.drawer.close();
-            }
+            },
         });
     }
-
 }
diff --git a/src/app/components/chat/profile/profile.component.ts b/src/app/components/chat/profile/profile.component.ts
index 284ffc9..d2a26d8 100644
--- a/src/app/components/chat/profile/profile.component.ts
+++ b/src/app/components/chat/profile/profile.component.ts
@@ -13,8 +13,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatDrawer } from '@angular/material/sidenav';
 import { Subject, takeUntil } from 'rxjs';
-import { Profile } from '../chat.types';
 import { ChatService } from '../chat.service';
+import { Profile } from '../chat.types';
 
 @Component({
     selector: 'chat-profile',
diff --git a/src/app/components/event-list/event-list.component.html b/src/app/components/event-list/event-list.component.html
new file mode 100644
index 0000000..af56ce6
--- /dev/null
+++ b/src/app/components/event-list/event-list.component.html
@@ -0,0 +1,239 @@
+
+<div
+class=""
+    infiniteScroll
+    [infiniteScrollDistance]="2"
+    [infiniteScrollThrottle]="500"
+    (scrolled)="loadMoreEvents()"
+    [scrollWindow]="true"
+>
+<angor-card class="mb-8 flex w-full flex-col" #expandableComments="angorCard"
+*ngFor="let event of events$ | async let i = index">
+<div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
+    <img class="mr-4 h-10 w-10 rounded-full"
+        [src]="event.picture || 'images/avatars/avatar-placeholder.png'"
+        onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
+        alt="{{ event.username }}" />
+    <div class="flex flex-col">
+        <span class="font-semibold leading-none">{{
+            event.username
+            }}</span>
+        <span class="text-secondary mt-1 text-sm leading-none">{{
+            getTimeFromNow(event)
+            }}</span>
+    </div>
+    <button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu02">
+        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
+    </button>
+    <mat-menu #postCardMenu02="matMenu">
+        <button mat-menu-item>
+            <span class="flex items-center">
+                <mat-icon class="mr-3 icon-size-5"
+                    [svgIcon]="'heroicons_solid:arrow-up-tray'"></mat-icon>
+                <span>Save post</span>
+            </span>
+        </button>
+        <button mat-menu-item>
+            <span class="flex items-center">
+                <mat-icon class="mr-3 icon-size-5"
+                    [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
+                <span>Hide post</span>
+            </span>
+        </button>
+        <button mat-menu-item>
+            <span class="flex items-center">
+                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:clock'"></mat-icon>
+                <span>Snooze for 30 days</span>
+            </span>
+        </button>
+        <button mat-menu-item>
+            <span class="flex items-center">
+                <mat-icon class="mr-3 icon-size-5"
+                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
+                <span>Hide all</span>
+            </span>
+        </button>
+        <mat-divider class="my-2"></mat-divider>
+        <button mat-menu-item>
+            <span class="flex items-center">
+                <mat-icon class="mr-3 icon-size-5"
+                    [svgIcon]="'heroicons_solid:exclamation-triangle'"></mat-icon>
+                <span>Report post</span>
+            </span>
+        </button>
+        <button mat-menu-item>
+            <span class="flex items-center">
+                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
+                <span>Turn on notifications for this post</span>
+            </span>
+        </button>
+    </mat-menu>
+</div>
+<div class="mx-6 mb-6 mt-2 sm:mx-8" [innerHTML]="parseContent(event.content)"></div>
+<div class="relative mb-4">
+    <!-- image or video -->
+</div>
+<div class="mx-3 flex items-center sm:mx-5">
+    <button class="mr-1 px-3" mat-button (click)="toggleLike(event)">
+        <mat-icon class="text-red-500 icon-size-5" [ngClass]="{ 'heart-beat': event.likedByMe }"
+            [svgIcon]="
+                event.likedByMe
+                    ? 'heroicons_solid:heart'
+                    : 'heroicons_outline:heart'
+            ">
+        </mat-icon>
+        <span class="ml-2">{{ event.likeCount }} Like</span>
+    </button>
+
+
+    <button class="mr-1 px-3" mat-button (click)="
+            expandableComments.expanded = !expandableComments.expanded
+        ">
+        <mat-icon class="icon-size-5"
+            [svgIcon]="'heroicons_solid:chat-bubble-left-ellipsis'"></mat-icon>
+        <span class="ml-2">Comment</span>
+    </button>
+    <button class="mr-1 px-3" mat-button>
+        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
+        <span class="ml-2">Share</span>
+    </button>
+</div>
+<hr class="mx-6 mb-6 mt-4 border-b sm:mx-8" />
+<div class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
+    <div class="flex items-center">
+        <img class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
+            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
+        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
+            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
+        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
+            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
+        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
+            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
+        <div class="ml-3 text-md tracking-tight">
+            ⚡ {{ event.zapCount }} zap
+        </div>
+    </div>
+    <div class="hidden flex-auto sm:flex"></div>
+    <div class="mt-4 flex items-center sm:mt-0">
+        <button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
+            {{ event.repostCount }} shares
+        </button>
+        <button class="px-3 sm:-mr-4" mat-button (click)="
+                expandableComments.expanded =
+                    !expandableComments.expanded
+            ">
+            <span class="mr-1">{{ event.replyCount }} Comments</span>
+            <mat-icon class="rotate-0 transition-transform duration-150 ease-in-out icon-size-5"
+                [ngClass]="{
+                    'rotate-180': expandableComments.expanded,
+                }" [svgIcon]="'heroicons_mini:chevron-down'"></mat-icon>
+        </button>
+    </div>
+</div>
+
+<ng-container angorCardExpansion>
+    <hr class="m-0 border-b" />
+    <div class="mx-4 mb-3 mt-6 flex flex-col sm:mx-8">
+        <div class="flex items-start">
+            <img class="mr-5 h-12 w-12 rounded-full object-cover" [src]="
+                    currentUserMetadata?.picture ||
+                    'images/avatars/avatar-placeholder.png'
+                " onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
+                alt="{{
+                    currentUserMetadata?.display_name ||
+                        currentUserMetadata?.name ||
+                        'Avatar'
+                }}" />
+
+            <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
+                <textarea
+                [ngModel]="getComment(i)"
+                (ngModelChange)="setComment(i, $event)"
+                placeholder="Write a comment..."
+                matInput>
+              </textarea>
+
+            </mat-form-field>
+
+        </div>
+        <div class="mt-3 flex items-center justify-between">
+            <div class="flex items-center">
+                <button mat-icon-button (click)="toggleCommentEmojiPicker(i)">
+                    <mat-icon class="icon-size-5"
+                        [svgIcon]="'heroicons_solid:face-smile'"></mat-icon>
+                </button>
+                <div *ngIf="eventStates[i]?.showEmojiPicker" class="emoji-picker-container-global">
+                    <emoji-mart (emojiClick)="addEmojiToComment($event, i)" [darkMode]="darkMode"></emoji-mart>
+                  </div>
+                <button mat-icon-button>
+                    <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:photo'"></mat-icon>
+                </button>
+                <button mat-icon-button>
+                    <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
+                </button>
+            </div>
+            <button mat-button (click)="sendComment(event, i)">
+                <mat-icon [svgIcon]="'heroicons_solid:paper-airplane'"></mat-icon>
+                <span>Send</span>
+              </button>
+        </div>
+    </div>
+
+
+    <div class="max-h-120 overflow-y-auto">
+        <div class="relative mx-4 my-6 flex flex-col sm:mx-8">
+            <div class="flex items-start mb-4" *ngFor="let reply of event.replies">
+                <img
+                    class="mr-4 h-8 w-8 rounded-full"
+                    [src]="reply.picture || 'images/avatars/avatar-placeholder.png'"
+                    onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
+                    alt="{{ reply.username }}"
+                />
+                <div class="mt-0.5 flex flex-col">
+                    <span>
+                       <b>{{ reply.username }}: </b>
+                        {{ reply.content }}
+                    </span>
+                    <div
+                        class="text-secondary mt-2 flex items-center text-sm"
+                    >
+                        <span
+                            class="mr-2 cursor-pointer hover:underline"
+                            >Like</span
+                        >
+                        <span
+                            class="mr-2 cursor-pointer hover:underline"
+                            >Reply</span
+                        >
+                        <span
+                            class="mr-2 cursor-pointer hover:underline"
+                            >Hide replies</span
+                        >
+                        <span class="mr-2">&bull;</span>
+                        <span>{{getTimeFromNow(reply) }}</span>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+
+</ng-container>
+</angor-card>
+
+<div *ngIf="isLoading" class="loading-spinner">
+    <div class="spinner"></div>
+    Loading events...
+</div>
+
+    <button
+        *ngIf="!noMoreEvents && !isLoading"
+        class="load-more-btn"
+        (click)="loadMoreEvents()"
+    >
+        Load More Events
+    </button>
+</div>
+
+<div *ngIf="noMoreEvents" class="no-more-events">No more events to load.</div>
diff --git a/src/app/components/event-list/event-list.component.scss b/src/app/components/event-list/event-list.component.scss
new file mode 100644
index 0000000..7d8519d
--- /dev/null
+++ b/src/app/components/event-list/event-list.component.scss
@@ -0,0 +1,158 @@
+:host {
+    display: block;
+    max-width: 600px;
+    margin: 0 auto;
+    font-family: 'Arial', sans-serif;
+}
+
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0;
+
+    .spinner {
+        border: 4px solid rgba(0, 0, 0, 0.1);
+        border-left-color: #009fb5;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}
+
+.event-list {
+    list-style: none;
+    padding: 0;
+    margin: 20px 0;
+
+    .event-item {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 15px;
+        margin-bottom: 10px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: box-shadow 0.3s ease;
+
+        &:hover {
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+        }
+
+        .event-header {
+            display: flex;
+            align-items: center;
+
+            .profile-picture {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                margin-right: 10px;
+                border: 2px solid #009fb5;
+            }
+
+            .event-info {
+                .username {
+                    font-weight: bold;
+                    color: #333;
+                }
+
+                .timestamp {
+                    font-size: 0.9em;
+                    color: #888;
+                }
+            }
+        }
+
+        .event-content {
+            margin: 10px 0;
+            font-size: 1.1em;
+            color: #555;
+        }
+
+        .event-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+
+            button {
+                background-color: transparent;
+                border: none;
+                cursor: pointer;
+                color: #009fb5;
+                font-size: 1.1em;
+                transition: color 0.2s ease;
+
+                &:hover {
+                    color: #007f91;
+                }
+
+                &:disabled {
+                    color: #999;
+                    cursor: not-allowed;
+                }
+            }
+        }
+
+        .event-replies {
+            margin-top: 15px;
+            border-top: 1px solid #e0e0e0;
+            padding-top: 10px;
+
+            ul {
+                list-style: none;
+                padding: 0;
+
+                .reply-item {
+                    margin: 5px 0;
+                    font-size: 0.9em;
+
+                    .reply-username {
+                        font-weight: bold;
+                        color: #009fb5;
+                    }
+
+                    .reply-content {
+                        color: #555;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.no-more-events {
+    text-align: center;
+    color: #555;
+    margin: 20px 0;
+    font-size: 1.1em;
+}
+
+.load-more-btn {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    font-size: 1.1em;
+    background-color: #009fb5;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+        background-color: #007f91;
+    }
+
+    &:focus {
+        outline: none;
+    }
+}
diff --git a/src/app/components/event-list/event-list.component.ts b/src/app/components/event-list/event-list.component.ts
new file mode 100644
index 0000000..d871185
--- /dev/null
+++ b/src/app/components/event-list/event-list.component.ts
@@ -0,0 +1,252 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { PaginatedEventService } from 'app/services/event.service';
+import { NewEvent } from 'app/types/NewEvent';
+import { AngorCardComponent } from '@angor/components/card';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import { NgClass, CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { PickerComponent } from '@ctrl/ngx-emoji-mart';
+import { QRCodeModule } from 'angularx-qrcode';
+import { SafeUrlPipe } from 'app/shared/pipes/safe-url.pipe';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+
+@Component({
+  selector: 'app-event-list',
+  templateUrl: './event-list.component.html',
+  styleUrls: ['./event-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    RouterLink,
+    AngorCardComponent,
+    MatIconModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatFormFieldModule,
+    MatInputModule,
+    TextFieldModule,
+    MatDividerModule,
+    MatTooltipModule,
+    NgClass,
+    CommonModule,
+    FormsModule,
+    QRCodeModule,
+    PickerComponent,
+    MatSlideToggle,
+    SafeUrlPipe,
+    MatProgressSpinnerModule,
+    InfiniteScrollModule,
+  ]
+})
+export class EventListComponent implements OnInit, OnDestroy {
+  @Input() pubkeys: string[] = [];
+  @Input() currentUserMetadata: any;
+
+  events$: Observable<NewEvent[]>;
+  eventStates: { showEmojiPicker: boolean; comment: string }[] = [];
+  subscriptions: Subscription[] = [];
+
+  isLoading = false;
+  noMoreEvents = false;
+
+  constructor(
+    private paginatedEventService: PaginatedEventService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private sanitizer: DomSanitizer
+  ) {
+    this.events$ = this.paginatedEventService.getEventStream();
+  }
+
+  ngOnInit(): void {
+    this.resetAll();
+  }
+
+
+
+  subscribeToEvents(): void {
+    this.unsubscribeAll();
+
+   
+    if (!this.pubkeys || this.pubkeys.length === 0) {
+      console.warn('No public keys provided');
+      return;
+    }
+
+
+    this.paginatedEventService.subscribeToEvents(this.pubkeys)
+      .then(() => {
+        console.log('Subscribed to events for the new user.');
+      })
+      .catch(error => {
+        console.error('Error subscribing to events:', error);
+      });
+
+
+    const eventSub = this.events$.subscribe(events => {
+      const relevantEvents = events.filter(event => this.pubkeys.includes(event.pubkey));
+
+      this.eventStates = relevantEvents.map(() => ({
+        showEmojiPicker: false,
+        comment: ''
+      }));
+
+      this.changeDetectorRef.markForCheck();
+    });
+
+    this.subscriptions.push(eventSub);
+  }
+
+
+
+  resetAll(): void {
+    this.unsubscribeAll();
+    this.clearComponentState();
+    this.paginatedEventService.clearEvents();
+    this.subscribeToEvents();
+    this.loadInitialEvents();
+  }
+
+
+
+
+
+
+  unsubscribeAll(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+    this.subscriptions = [];
+  }
+
+  clearComponentState(): void {
+    this.eventStates = [];
+    this.isLoading = false;
+    this.noMoreEvents = false;
+    this.changeDetectorRef.markForCheck();
+  }
+
+
+  loadInitialEvents(): void {
+    if (this.pubkeys.length === 0) {
+      console.warn('No pubkeys provided');
+      return;
+    }
+
+    this.isLoading = true;
+    this.paginatedEventService.loadMoreEvents(this.pubkeys).finally(() => {
+      this.isLoading = false;
+      this.changeDetectorRef.markForCheck();
+    });
+  }
+
+  loadMoreEvents(): void {
+    if (!this.isLoading && !this.noMoreEvents) {
+      this.isLoading = true;
+      this.paginatedEventService.loadMoreEvents(this.pubkeys).finally(() => {
+        this.isLoading = false;
+        this.changeDetectorRef.markForCheck();
+      });
+    }
+  }
+
+
+
+
+
+  getComment(index: number): string {
+    return this.eventStates[index]?.comment || '';
+  }
+
+  setComment(index: number, value: string): void {
+    if (this.eventStates[index]) {
+      this.eventStates[index].comment = value;
+    }
+  }
+
+  getSanitizedContent(content: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(content);
+  }
+
+  sendLike(event: NewEvent): void {
+    if (!event.likedByMe) {
+      this.paginatedEventService.sendLikeEvent(event).then(() => {
+        event.likedByMe = true;
+        event.likeCount++;
+        this.changeDetectorRef.markForCheck();
+      }).catch(error => console.error('Failed to send like:', error));
+    }
+  }
+
+  toggleLike(event: NewEvent): void {
+    this.sendLike(event);
+  }
+
+  toggleCommentEmojiPicker(index: number): void {
+    this.eventStates[index].showEmojiPicker = !this.eventStates[index].showEmojiPicker;
+  }
+
+  addEmojiToComment(event: any, index: number): void {
+    this.eventStates[index].comment += event.emoji.native;
+    this.eventStates[index].showEmojiPicker = false;
+  }
+
+  sendComment(event: NewEvent, index: number): void {
+    const comment = this.eventStates[index].comment;
+    if (comment.trim() !== '') {
+      this.paginatedEventService.sendReplyEvent(event, comment).then(() => {
+        this.eventStates[index].comment = '';
+        this.changeDetectorRef.markForCheck();
+      });
+    }
+  }
+
+  trackById(index: number, item: NewEvent): string {
+    return item.id;
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+  }
+
+  getTimeFromNow(event: NewEvent): string {
+    return event.fromNow;
+  }
+
+  parseContent(content: string): SafeHtml {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    const cleanedContent = content.replace(/["]+/g, '');
+    const parsedContent = cleanedContent
+      .replace(urlRegex, (url) => {
+        if (url.match(/\.(jpeg|jpg|gif|png|bmp|svg|webp|tiff)$/) != null) {
+          return `<img src="${url}" alt="Image" width="100%" class="c-img">`;
+        } else if (url.match(/\.(mp4|webm)$/) != null) {
+          return `<video controls width="100%" class="c-video"><source src="${url}" type="video/mp4">Your browser does not support the video tag.</video>`;
+        } else if (url.match(/(youtu\.be\/|youtube\.com\/watch\?v=)/)) {
+          let videoId;
+          if (url.includes('youtu.be/')) {
+            videoId = url.split('youtu.be/')[1];
+          } else if (url.includes('watch?v=')) {
+            const urlParams = new URLSearchParams(url.split('?')[1]);
+            videoId = urlParams.get('v');
+          }
+          return `<iframe width="100%" class="c-video" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`;
+        } else {
+          return `<a href="${url}" target="_blank">${url}</a>`;
+        }
+      })
+      .replace(/\n/g, '<br>');
+
+    return this.sanitizer.bypassSecurityTrustHtml(parsedContent);
+  }
+}
diff --git a/src/app/components/explore/explore.component.html b/src/app/components/explore/explore.component.html
index 82d5327..e75c587 100644
--- a/src/app/components/explore/explore.component.html
+++ b/src/app/components/explore/explore.component.html
@@ -1,20 +1,37 @@
 <div class="absolute inset-0 flex min-w-0 flex-col overflow-y-auto">
     <!-- Header -->
-    <div class="dark relative flex-0 overflow-hidden bg-gray-800 px-4 py-8 sm:p-16">
+    <div
+        class="dark relative flex-0 overflow-hidden bg-gray-800 px-4 py-8 sm:p-16"
+    >
         <!-- Background -->
-        <svg class="pointer-events-none absolute inset-0" viewBox="0 0 960 540" width="100%" height="100%"
-            preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
-            <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
+        <svg
+            class="pointer-events-none absolute inset-0"
+            viewBox="0 0 960 540"
+            width="100%"
+            height="100%"
+            preserveAspectRatio="xMidYMax slice"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g
+                class="text-gray-700 opacity-25"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="100"
+            >
                 <circle r="234" cx="196" cy="23"></circle>
                 <circle r="234" cx="790" cy="491"></circle>
             </g>
         </svg>
         <div class="relative z-10 flex flex-col items-center">
             <h2 class="text-xl font-semibold">Explore Projects</h2>
-            <div class="mt-1 text-center text-4xl font-extrabold leading-tight tracking-tight sm:text-7xl">
+            <div
+                class="mt-1 text-center text-4xl font-extrabold leading-tight tracking-tight sm:text-7xl"
+            >
                 What’s your next investment?
             </div>
-            <div class="text-secondary mt-6 max-w-2xl text-center tracking-tight sm:text-2xl">
+            <div
+                class="text-secondary mt-6 max-w-2xl text-center tracking-tight sm:text-2xl"
+            >
                 Check out our projects and find your next investment
                 opportunity.
             </div>
@@ -23,110 +40,188 @@
 
     <!-- Main -->
     <div class="p-6 sm:p-10">
-        <div class="mx-auto flex w-full max-w-xs flex-auto flex-col sm:max-w-5xl">
+        <div
+            class="mx-auto flex w-full max-w-xs flex-auto flex-col sm:max-w-5xl"
+        >
             <!-- Filters -->
-            <div class="flex w-full max-w-xs flex-col items-center justify-between sm:max-w-none sm:flex-row">
+            <div
+                class="flex w-full max-w-xs flex-col items-center justify-between sm:max-w-none sm:flex-row"
+            >
                 <!-- Search bar with clear button -->
-                <div class="flex items-center space-x-2 w-full sm:w-auto">
-                    <mat-form-field class="mt-4 w-full sm:w-80" [subscriptSizing]="'dynamic'">
-                        <mat-icon matPrefix class="icon-size-5" [svgIcon]="'heroicons_solid:magnifying-glass'"></mat-icon>
-                        <input (keyup.enter)="filterByQuery(query.value)" placeholder="Search ..." matInput #query />
+                <div class="flex w-full items-center space-x-2 sm:w-auto">
+                    <mat-form-field
+                        class="mt-4 w-full sm:w-80"
+                        [subscriptSizing]="'dynamic'"
+                    >
+                        <mat-icon
+                            matPrefix
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:magnifying-glass'"
+                        ></mat-icon>
+                        <input
+                            (keyup.enter)="filterByQuery(query.value)"
+                            placeholder="Search ..."
+                            matInput
+                            #query
+                        />
                     </mat-form-field>
                     <!-- Clear search button -->
-                    <button mat-icon-button color="warn" *ngIf="showCloseSearchButton" (click)="resetSearch(query)" class="mt-4">
-                        <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
+                    <button
+                        mat-icon-button
+                        color="warn"
+                        *ngIf="showCloseSearchButton"
+                        (click)="resetSearch(query)"
+                        class="mt-4"
+                    >
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:x-mark'"
+                        ></mat-icon>
                     </button>
-                    <button mat-icon-button color="success" *ngIf="!showCloseSearchButton" (click)="filterByQuery(query.value)" class="mt-4">
-                        <mat-icon [svgIcon]="'heroicons_solid:magnifying-glass'"></mat-icon>
+                    <button
+                        mat-icon-button
+                        color="success"
+                        *ngIf="!showCloseSearchButton"
+                        (click)="filterByQuery(query.value)"
+                        class="mt-4"
+                    >
+                        <mat-icon
+                            [svgIcon]="'heroicons_solid:magnifying-glass'"
+                        ></mat-icon>
                     </button>
                 </div>
                 <!-- Toggle completed -->
-                <mat-slide-toggle class="mt-8 sm:ml-auto sm:mt-0" [color]="'primary'" (change)="toggleCompleted($event)">
+                <mat-slide-toggle
+                    class="mt-8 sm:ml-auto sm:mt-0"
+                    [color]="'primary'"
+                    (change)="toggleCompleted($event)"
+                >
                     Hide completed
                 </mat-slide-toggle>
             </div>
         </div>
         <div class="mx-auto flex w-full flex-auto flex-col sm:max-w-5xl">
             <!-- Project Cards -->
-            <div class="mt-10 grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
+            <div
+                class="mt-10 grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2"
+            >
                 <!-- Loop through projects and render cards -->
                 <ng-container *ngFor="let project of filteredProjects">
                     <angor-card class="filter-info flex w-full flex-col">
                         <div class="flex h-32">
-                            <img class="object-cover" [src]="
+                            <img
+                                class="object-cover"
+                                [src]="
                                     getSafeUrl(project?.banner, true) ||
                                     'images/pages/profile/cover.jpg'
-                                " onerror="this.onerror=null; this.src='/images/pages/profile/cover.jpg';"
-                                alt="Card cover image" />
+                                "
+                                onerror="this.onerror=null; this.src='/images/pages/profile/cover.jpg';"
+                                alt="Card cover image"
+                            />
                         </div>
                         <div class="flex px-8">
                             <div class="bg-card -mt-12 rounded-full p-1">
-                                <img class="h-24 w-24 rounded-full object-cover" [src]="
+                                <img
+                                    class="h-24 w-24 rounded-full object-cover"
+                                    [src]="
                                         getSafeUrl(project?.picture, false) ||
                                         'images/avatars/avatar-placeholder.png'
-                                    " onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
-                                    alt="Project logo" />
+                                    "
+                                    onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
+                                    alt="Project logo"
+                                />
                             </div>
                         </div>
                         <div class="flex flex-col px-8 pb-6 pt-4">
                             <div class="flex items-center justify-between">
                                 <div class="mr-4 min-w-0 flex-1">
                                     @if (project.displayName || project.name) {
-                                    <div class="truncate text-2xl font-semibold leading-tight" role="button" (click)="
+                                        <div
+                                            class="truncate text-2xl font-semibold leading-tight"
+                                            role="button"
+                                            (click)="
                                                 goToProjectDetails(project)
-                                            ">
-                                        {{
-                                        project.displayName ||
-                                        project.nostrPubKey
-                                        }}
-                                    </div>
+                                            "
+                                        >
+                                            {{
+                                                project.displayName ||
+                                                    project.nostrPubKey
+                                            }}
+                                        </div>
                                     }
                                     @if (
-                                    !project.name && !project.displayName
+                                        !project.name && !project.displayName
                                     ) {
-                                    <div class="truncate text-2xl font-semibold leading-tight">
-                                        {{
-                                        project.displayName ||
-                                        project.nostrPubKey
-                                        }}
-                                    </div>
+                                        <div
+                                            class="truncate text-2xl font-semibold leading-tight"
+                                        >
+                                            {{
+                                                project.displayName ||
+                                                    project.nostrPubKey
+                                            }}
+                                        </div>
                                     }
-                                    <div class="text-secondary mt-1 truncate leading-tight">
+                                    <div
+                                        class="text-secondary mt-1 truncate leading-tight"
+                                    >
                                         {{
-                                        project.about ||
-                                        'No description available'
+                                            project.about ||
+                                                'No description available'
                                         }}
                                     </div>
                                 </div>
                                 @if (project.displayName || project.name) {
-                                <div class="flex h-10 w-10 items-center justify-center rounded-full border">
-                                    <button mat-icon-button (click)="
+                                    <div
+                                        class="flex h-10 w-10 items-center justify-center rounded-full border"
+                                    >
+                                        <button
+                                            mat-icon-button
+                                            (click)="
                                                 openChat(project.nostrPubKey)
-                                            ">
-                                        <mat-icon class="icon-size-5" [svgIcon]="
+                                            "
+                                        >
+                                            <mat-icon
+                                                class="icon-size-5"
+                                                [svgIcon]="
                                                     'heroicons_outline:chat-bubble-left-right'
-                                                "></mat-icon>
-                                    </button>
-                                </div>
+                                                "
+                                            ></mat-icon>
+                                        </button>
+                                    </div>
                                 }
                             </div>
                             <hr class="my-6 w-full border-t" />
                             <div class="flex items-center justify-between">
-                                <div class="text-secondary mr-3 text-md font-medium">
+                                <div
+                                    class="text-secondary mr-3 text-md font-medium"
+                                >
                                     {{ project.totalInvestmentsCount || 0 }}
                                     investors
                                 </div>
                                 <div class="flex items-center">
-                                    <ng-container *ngFor="
-                                    let investor of [].constructor(project.totalInvestmentsCount || 0);
-                                    let i = index
-                                ">
+                                    <ng-container
+                                        *ngFor="
+                                            let investor of [].constructor(
+                                                project.totalInvestmentsCount ||
+                                                    0
+                                            );
+                                            let i = index
+                                        "
+                                    >
                                         <ng-container *ngIf="i < 10">
-                                            <img class="text-card ring-bg-card m-0.5 h-6 w-6 rounded-full ring-2"
+                                            <img
+                                                class="text-card ring-bg-card m-0.5 h-6 w-6 rounded-full ring-2"
                                                 [ngClass]="{
-                                                 '-ml-3': project.totalInvestmentsCount > 1 && i > 0
-                                             }" [src]="'images/avatars/avatar-placeholder.png'"
-                                                alt="Investor avatar {{ i + 1 }}" />
+                                                    '-ml-3':
+                                                        project.totalInvestmentsCount >
+                                                            1 && i > 0,
+                                                }"
+                                                [src]="
+                                                    'images/avatars/avatar-placeholder.png'
+                                                "
+                                                alt="Investor avatar {{
+                                                    i + 1
+                                                }}"
+                                            />
                                         </ng-container>
                                     </ng-container>
                                 </div>
@@ -135,18 +230,32 @@
                     </angor-card>
                 </ng-container>
             </div>
-            <ng-container *ngIf="filteredProjects.length ==0">
-                <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
-                    <mat-icon class="icon-size-24"
-                        [svgIcon]="'heroicons_outline:archive-box-x-mark'"></mat-icon>
-                    <div class="text-secondary mt-4 text-2xl font-semibold tracking-tight">
+            <ng-container *ngIf="filteredProjects.length == 0">
+                <div
+                    class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent"
+                >
+                    <mat-icon
+                        class="icon-size-24"
+                        [svgIcon]="'heroicons_outline:archive-box-x-mark'"
+                    ></mat-icon>
+                    <div
+                        class="text-secondary mt-4 text-2xl font-semibold tracking-tight"
+                    >
                         No project
                     </div>
                 </div>
             </ng-container>
             <!-- Load More Button -->
-            <div *ngIf="filteredProjects.length >0" class="mt-10 flex justify-center">
-                <button mat-raised-button color="primary" (click)="loadProjects()" [disabled]="loading">
+            <div
+                *ngIf="filteredProjects.length > 0"
+                class="mt-10 flex justify-center"
+            >
+                <button
+                    mat-raised-button
+                    color="primary"
+                    (click)="loadProjects()"
+                    [disabled]="loading"
+                >
                     {{ loading ? 'Loading...' : 'Load More Projects' }}
                 </button>
             </div>
diff --git a/src/app/components/explore/explore.component.ts b/src/app/components/explore/explore.component.ts
index a54cfa2..76721df 100644
--- a/src/app/components/explore/explore.component.ts
+++ b/src/app/components/explore/explore.component.ts
@@ -1,7 +1,19 @@
-import { Component, OnInit, OnDestroy, ViewEncapsulation, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
-import { Router } from '@angular/router';
-import { ProjectsService } from '../../services/projects.service';
-import { StateService } from '../../services/state.service';
+import { AngorCardComponent } from '@angor/components/card';
+import { AngorFindByKeyPipe } from '@angor/pipes/find-by-key';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import {
+    CommonModule,
+    I18nPluralPipe,
+    NgClass,
+    PercentPipe,
+} from '@angular/common';
+import {
+    ChangeDetectorRef,
+    Component,
+    OnDestroy,
+    OnInit,
+    ViewEncapsulation,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -11,18 +23,16 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterLink } from '@angular/router';
-import { AngorCardComponent } from '@angor/components/card';
-import { AngorFindByKeyPipe } from '@angor/pipes/find-by-key';
-import { CdkScrollable } from '@angular/cdk/scrolling';
-import { NgClass, PercentPipe, I18nPluralPipe, CommonModule } from '@angular/common';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Router, RouterLink } from '@angular/router';
+import { Project } from 'app/interface/project.interface';
+import { IndexedDBService } from 'app/services/indexed-db.service';
 import { MetadataService } from 'app/services/metadata.service';
 import { Subject, takeUntil } from 'rxjs';
-import { IndexedDBService } from 'app/services/indexed-db.service';
-import { Project } from 'app/interface/project.interface';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-import { Contact } from '../chat/chat.types';
+import { ProjectsService } from '../../services/projects.service';
+import { StateService } from '../../services/state.service';
 import { ChatService } from '../chat/chat.service';
+import { Contact } from '../chat/chat.types';
 
 @Component({
     selector: 'explore',
@@ -30,10 +40,23 @@ import { ChatService } from '../chat/chat.service';
     templateUrl: './explore.component.html',
     encapsulation: ViewEncapsulation.None,
     imports: [
-        MatButtonModule, RouterLink, MatIconModule, AngorCardComponent,
-        CdkScrollable, MatFormFieldModule, MatSelectModule, MatOptionModule,
-        MatInputModule, MatSlideToggleModule, NgClass, MatTooltipModule,
-        MatProgressBarModule, AngorFindByKeyPipe, PercentPipe, I18nPluralPipe, CommonModule
+        MatButtonModule,
+        RouterLink,
+        MatIconModule,
+        AngorCardComponent,
+        CdkScrollable,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatOptionModule,
+        MatInputModule,
+        MatSlideToggleModule,
+        NgClass,
+        MatTooltipModule,
+        MatProgressBarModule,
+        AngorFindByKeyPipe,
+        PercentPipe,
+        I18nPluralPipe,
+        CommonModule,
     ],
 })
 export class ExploreComponent implements OnInit, OnDestroy {
@@ -45,7 +68,6 @@ export class ExploreComponent implements OnInit, OnDestroy {
     filteredProjects: Project[] = [];
     showCloseSearchButton: boolean = false;
 
-
     constructor(
         private projectService: ProjectsService,
         private router: Router,
@@ -55,7 +77,7 @@ export class ExploreComponent implements OnInit, OnDestroy {
         private changeDetectorRef: ChangeDetectorRef,
         private sanitizer: DomSanitizer,
         private _chatService: ChatService
-    ) { }
+    ) {}
 
     async ngOnInit(): Promise<void> {
         this.loadInitialProjects();
@@ -96,21 +118,26 @@ export class ExploreComponent implements OnInit, OnDestroy {
             this.filteredProjects = [...this.projects];
             this.stateService.setProjects(this.projects);
 
-            const pubkeys = projects.map(p => p.nostrPubKey);
+            const pubkeys = projects.map((p) => p.nostrPubKey);
             await this.loadMetadataForProjects(pubkeys);
-
         } catch (error) {
             this.handleError('Error fetching projects from service');
         }
     }
     private subscribeToMetadataUpdates(): void {
-        this.indexedDBService.getMetadataStream()
+        this.indexedDBService
+            .getMetadataStream()
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((updatedMetadata: any) => {
                 if (updatedMetadata) {
-                    const projectToUpdate = this.projects.find(p => p.nostrPubKey === updatedMetadata.pubkey);
+                    const projectToUpdate = this.projects.find(
+                        (p) => p.nostrPubKey === updatedMetadata.pubkey
+                    );
                     if (projectToUpdate) {
-                        this.updateProjectMetadata(projectToUpdate, updatedMetadata.metadata);
+                        this.updateProjectMetadata(
+                            projectToUpdate,
+                            updatedMetadata.metadata
+                        );
                     }
                 }
             });
@@ -118,14 +145,15 @@ export class ExploreComponent implements OnInit, OnDestroy {
 
     private getProjectsWithoutMetadata(): string[] {
         return this.projects
-            .filter(project => !project.displayName || !project.about)
-            .map(project => project.nostrPubKey);
+            .filter((project) => !project.displayName || !project.about)
+            .map((project) => project.nostrPubKey);
     }
 
     private async loadMetadataForProjects(pubkeys: string[]): Promise<void> {
         const metadataPromises = pubkeys.map(async (pubkey) => {
             // Check cache first
-            const cachedMetadata = await this.indexedDBService.getUserMetadata(pubkey);
+            const cachedMetadata =
+                await this.indexedDBService.getUserMetadata(pubkey);
             if (cachedMetadata) {
                 return { pubkey, metadata: cachedMetadata };
             }
@@ -136,13 +164,15 @@ export class ExploreComponent implements OnInit, OnDestroy {
 
         // Filter out nulls (which represent pubkeys without cached metadata)
         const missingPubkeys = metadataResults
-            .filter(result => result === null)
+            .filter((result) => result === null)
             .map((_, index) => pubkeys[index]);
 
         // Update projects that have cached metadata
-        metadataResults.forEach(result => {
+        metadataResults.forEach((result) => {
             if (result && result.metadata) {
-                const project = this.projects.find(p => p.nostrPubKey === result.pubkey);
+                const project = this.projects.find(
+                    (p) => p.nostrPubKey === result.pubkey
+                );
                 if (project) {
                     this.updateProjectMetadata(project, result.metadata);
                 }
@@ -151,80 +181,103 @@ export class ExploreComponent implements OnInit, OnDestroy {
 
         // Fetch metadata for pubkeys that are not cached
         if (missingPubkeys.length > 0) {
-            await this.metadataService.fetchMetadataForMultipleKeys(missingPubkeys)
+            await this.metadataService
+                .fetchMetadataForMultipleKeys(missingPubkeys)
                 .then((metadataList: any[]) => {
-                    metadataList.forEach(metadata => {
-                        const project = this.projects.find(p => p.nostrPubKey === metadata.pubkey);
+                    metadataList.forEach((metadata) => {
+                        const project = this.projects.find(
+                            (p) => p.nostrPubKey === metadata.pubkey
+                        );
                         if (project) {
                             this.updateProjectMetadata(project, metadata);
                         }
                     });
                     this.changeDetectorRef.detectChanges();
                 })
-                .catch(error => {
-                    console.error('Error fetching metadata for projects:', error);
+                .catch((error) => {
+                    console.error(
+                        'Error fetching metadata for projects:',
+                        error
+                    );
                 });
         }
     }
 
-
-
     async loadProjects(): Promise<void> {
-        if (this.loading || this.errorMessage === 'No more projects found') return;
+        if (this.loading || this.errorMessage === 'No more projects found')
+            return;
 
         this.loading = true;
 
-        this.projectService.fetchProjects().then(async (projects: Project[]) => {
-            if (projects.length === 0 && this.projects.length === 0) {
-                this.errorMessage = 'No projects found';
-            } else if (projects.length === 0) {
-                this.errorMessage = 'No more projects found';
-            } else {
-                this.projects = [...this.projects, ...projects];
-                this.filteredProjects = [...this.projects];
+        this.projectService
+            .fetchProjects()
+            .then(async (projects: Project[]) => {
+                if (projects.length === 0 && this.projects.length === 0) {
+                    this.errorMessage = 'No projects found';
+                } else if (projects.length === 0) {
+                    this.errorMessage = 'No more projects found';
+                } else {
+                    this.projects = [...this.projects, ...projects];
+                    this.filteredProjects = [...this.projects];
 
-                const pubkeys = projects.map(project => project.nostrPubKey);
+                    const pubkeys = projects.map(
+                        (project) => project.nostrPubKey
+                    );
 
-                await this.loadMetadataForProjects(pubkeys);
+                    await this.loadMetadataForProjects(pubkeys);
 
-                this.stateService.setProjects(this.projects);
+                    this.stateService.setProjects(this.projects);
 
-                this.projects.forEach(project => this.subscribeToProjectMetadata(project));
-            }
-            this.loading = false;
-            this.changeDetectorRef.detectChanges();
-        }).catch((error: any) => {
-            console.error('Error fetching projects:', error);
-            this.errorMessage = 'Error fetching projects. Please try again later.';
-            this.loading = false;
-            this.changeDetectorRef.detectChanges();
-        });
+                    this.projects.forEach((project) =>
+                        this.subscribeToProjectMetadata(project)
+                    );
+                }
+                this.loading = false;
+                this.changeDetectorRef.detectChanges();
+            })
+            .catch((error: any) => {
+                console.error('Error fetching projects:', error);
+                this.errorMessage =
+                    'Error fetching projects. Please try again later.';
+                this.loading = false;
+                this.changeDetectorRef.detectChanges();
+            });
     }
 
     async loadMetadataForProject(project: Project): Promise<void> {
         try {
-            const metadata = await this.metadataService.fetchMetadataWithCache(project.nostrPubKey);
+            const metadata = await this.metadataService.fetchMetadataWithCache(
+                project.nostrPubKey
+            );
             if (metadata) {
                 this.updateProjectMetadata(project, metadata);
             } else {
-                console.warn(`No metadata found for project ${project.nostrPubKey}`);
+                console.warn(
+                    `No metadata found for project ${project.nostrPubKey}`
+                );
             }
         } catch (error) {
-            console.error(`Error fetching metadata for project ${project.nostrPubKey}:`, error);
+            console.error(
+                `Error fetching metadata for project ${project.nostrPubKey}:`,
+                error
+            );
         }
     }
 
     updateProjectMetadata(project: Project, metadata: any): void {
-
         const updatedProject: Project = {
             ...project,
             displayName: metadata.name || '',
-            about: metadata.about ? metadata.about.replace(/<\/?[^>]+(>|$)/g, '') : '',
+            about: metadata.about
+                ? metadata.about.replace(/<\/?[^>]+(>|$)/g, '')
+                : '',
             picture: metadata.picture || '',
-            banner: metadata.banner || ''
+            banner: metadata.banner || '',
         };
 
-        const index = this.projects.findIndex(p => p.projectIdentifier === project.projectIdentifier);
+        const index = this.projects.findIndex(
+            (p) => p.projectIdentifier === project.projectIdentifier
+        );
         if (index !== -1) {
             this.projects[index] = updatedProject;
             this.projects = [...this.projects];
@@ -235,11 +288,18 @@ export class ExploreComponent implements OnInit, OnDestroy {
     }
 
     subscribeToProjectMetadata(project: Project): void {
-        this.metadataService.getMetadataStream()
+        this.metadataService
+            .getMetadataStream()
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((updatedMetadata: any) => {
-                if (updatedMetadata && updatedMetadata.pubkey === project.nostrPubKey) {
-                    this.updateProjectMetadata(project, updatedMetadata.metadata);
+                if (
+                    updatedMetadata &&
+                    updatedMetadata.pubkey === project.nostrPubKey
+                ) {
+                    this.updateProjectMetadata(
+                        project,
+                        updatedMetadata.metadata
+                    );
                 }
             });
     }
@@ -247,7 +307,8 @@ export class ExploreComponent implements OnInit, OnDestroy {
     goToProjectDetails(project: Project): void {
         this.loading = true;
 
-        this.projectService.fetchAndSaveProjectStats(project.projectIdentifier)
+        this.projectService
+            .fetchAndSaveProjectStats(project.projectIdentifier)
             .then((stats) => {
                 if (stats) {
                     this.navigateToProfile(project.nostrPubKey);
@@ -278,17 +339,30 @@ export class ExploreComponent implements OnInit, OnDestroy {
 
         const lowerCaseQuery = query.toLowerCase();
 
-        this.filteredProjects = this.projects.filter(project => {
+        this.filteredProjects = this.projects.filter((project) => {
             return (
-                (project.displayName && project.displayName.toLowerCase().includes(lowerCaseQuery)) ||
-                (project.about && project.about.toLowerCase().includes(lowerCaseQuery)) ||
-                (project.displayName && project.displayName.toLowerCase().includes(lowerCaseQuery)) ||
-                (project.nostrPubKey && project.nostrPubKey.toLowerCase().includes(lowerCaseQuery)) ||
-                (project.projectIdentifier && project.projectIdentifier.toLowerCase().includes(lowerCaseQuery))
+                (project.displayName &&
+                    project.displayName
+                        .toLowerCase()
+                        .includes(lowerCaseQuery)) ||
+                (project.about &&
+                    project.about.toLowerCase().includes(lowerCaseQuery)) ||
+                (project.displayName &&
+                    project.displayName
+                        .toLowerCase()
+                        .includes(lowerCaseQuery)) ||
+                (project.nostrPubKey &&
+                    project.nostrPubKey
+                        .toLowerCase()
+                        .includes(lowerCaseQuery)) ||
+                (project.projectIdentifier &&
+                    project.projectIdentifier
+                        .toLowerCase()
+                        .includes(lowerCaseQuery))
             );
         });
 
-        this.showCloseSearchButton = this.projects.length > 0  ;
+        this.showCloseSearchButton = this.projects.length > 0;
 
         this.changeDetectorRef.detectChanges();
     }
@@ -299,9 +373,7 @@ export class ExploreComponent implements OnInit, OnDestroy {
         this.showCloseSearchButton = false;
     }
 
-    toggleCompleted(event: any): void {
-
-    }
+    toggleCompleted(event: any): void {}
 
     ngOnDestroy(): void {
         this._unsubscribeAll.next(null);
@@ -319,7 +391,9 @@ export class ExploreComponent implements OnInit, OnDestroy {
         if (url && typeof url === 'string' && this.isImageUrl(url)) {
             return this.sanitizer.bypassSecurityTrustUrl(url);
         } else {
-            const defaultImage = isBanner ? '/images/pages/profile/cover.jpg' : 'images/avatars/avatar-placeholder.png';
+            const defaultImage = isBanner
+                ? '/images/pages/profile/cover.jpg'
+                : 'images/avatars/avatar-placeholder.png';
             return this.sanitizer.bypassSecurityTrustUrl(defaultImage);
         }
     }
@@ -330,26 +404,34 @@ export class ExploreComponent implements OnInit, OnDestroy {
 
     async openChat(publicKey: string): Promise<void> {
         try {
-            const metadata = await this.metadataService.fetchMetadataWithCache(publicKey);
+            const metadata =
+                await this.metadataService.fetchMetadataWithCache(publicKey);
 
             if (metadata) {
                 const contact: Contact = {
                     pubKey: publicKey,
                     name: metadata.name || 'Unknown',
-                    picture: metadata.picture || '/images/avatars/avatar-placeholder.png',
+                    picture:
+                        metadata.picture ||
+                        '/images/avatars/avatar-placeholder.png',
                     about: metadata.about || '',
-                    displayName: metadata.displayName || metadata.name || 'Unknown',
+                    displayName:
+                        metadata.displayName || metadata.name || 'Unknown',
                 };
 
-                this._chatService.getChatById(contact.pubKey, contact).subscribe((chat) => {
-                    this.router.navigate(['/chat', contact.pubKey]);
-                });
+                this._chatService
+                    .getChatById(contact.pubKey, contact)
+                    .subscribe((chat) => {
+                        this.router.navigate(['/chat', contact.pubKey]);
+                    });
             } else {
-                console.error('No metadata found for the public key:', publicKey);
+                console.error(
+                    'No metadata found for the public key:',
+                    publicKey
+                );
             }
         } catch (error) {
             console.error('Error opening chat:', error);
         }
     }
-
 }
diff --git a/src/app/components/explore/explore.routes.ts b/src/app/components/explore/explore.routes.ts
index 83fc2eb..379f2b9 100644
--- a/src/app/components/explore/explore.routes.ts
+++ b/src/app/components/explore/explore.routes.ts
@@ -3,7 +3,7 @@ import { ExploreComponent } from 'app/components/explore/explore.component';
 
 export default [
     {
-        path     : '',
+        path: '',
         component: ExploreComponent,
     },
 ] as Routes;
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index d18fc4a..72bcaf0 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -3,10 +3,18 @@
         <div class="prose prose-sm mx-auto max-w-none">
             <h1>Angor Hub</h1>
             <p>
-                Angor Hub is a Nostr client that is customized around the Angor protocol, a decentralized crowdfunding platform. Leveraging the power of Nostr the platform allows you to explore projects that are raising funds using Angor, engage with investors, and connect directly with founders.
+                Angor Hub is a Nostr client that is customized around the Angor
+                protocol, a decentralized crowdfunding platform. Leveraging the
+                power of Nostr the platform allows you to explore projects that
+                are raising funds using Angor, engage with investors, and
+                connect directly with founders.
             </p>
             <p>
-                Whether you're an investor looking for the next big opportunity or a project founder seeking funding, Angor Hub offers the tools you need to succeed. From project pages, secure messaging to group channels, Angor Hub ensures seamless interaction within a decentralized Nostr.
+                Whether you're an investor looking for the next big opportunity
+                or a project founder seeking funding, Angor Hub offers the tools
+                you need to succeed. From project pages, secure messaging to
+                group channels, Angor Hub ensures seamless interaction within a
+                decentralized Nostr.
             </p>
         </div>
         <div>
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index ff29176..e9476a0 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -8,7 +8,7 @@ import { RouterLink } from '@angular/router';
     templateUrl: './home.component.html',
     encapsulation: ViewEncapsulation.None,
     standalone: true,
-    imports: [MatButtonModule, RouterLink, MatIconModule],
+    imports: [MatButtonModule, RouterLink, MatIconModule ],
 })
 export class LandingHomeComponent {
     /**
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index c42049b..bf4af13 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -3,147 +3,237 @@
     <div class="bg-card flex flex-col shadow">
         <!-- Cover image -->
         <div>
-            <img class="h-40 object-cover lg:h-80" [src]="metadata?.banner || '/images/pages/profile/cover.jpg'"
+            <img
+                class="h-40 object-cover lg:h-80"
+                [src]="metadata?.banner || '/images/pages/profile/cover.jpg'"
                 onerror="this.onerror=null; this.src='/images/pages/profile/cover.jpg';"
-                alt="{{metadata?.display_name || metadata?.name || 'Banner'}}" />
+                alt="{{ metadata?.display_name || metadata?.name || 'Banner' }}"
+            />
         </div>
 
         <!-- User info -->
-        <div class="bg-card mx-auto flex w-full max-w-5xl flex-0 flex-col items-center px-8 lg:h-18 lg:flex-row">
+        <div
+            class="bg-card mx-auto flex w-full max-w-5xl flex-0 flex-col items-center px-8 lg:h-18 lg:flex-row"
+        >
             <!-- picture -->
-            <div class="-mt-26 rounded-full lg:-mt-22 flex-shrink-0">
+            <div class="-mt-26 flex-shrink-0 rounded-full lg:-mt-22">
                 <ng-container *ngIf="metadata?.picture; else defaultAvatar">
-                    <img class="ring-bg-card min-h-32 min-w-32 h-32 w-32 rounded-full ring-4 object-cover max-w-fit"
+                    <img
+                        class="ring-bg-card h-32 min-h-32 w-32 min-w-32 max-w-fit rounded-full object-cover ring-4"
                         [src]="getSafeUrl(metadata?.picture)"
                         onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
-                        alt="{{metadata?.display_name || metadata?.name || 'Avatar'}}" />
+                        alt="{{
+                            metadata?.display_name || metadata?.name || ''
+                        }}"
+                    />
                 </ng-container>
                 <ng-template #defaultAvatar>
-                    <img class="ring-bg-card min-h-32 min-w-32 h-32 w-32 rounded-full ring-4 object-cover"
+                    <img
+                        class="ring-bg-card h-32 min-h-32 w-32 min-w-32 rounded-full object-cover ring-4"
                         src="/images/avatars/avatar-placeholder.png"
                         onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
-                        alt="{{metadata?.display_name || metadata?.name || 'Avatar'}}" />
+                        alt="{{
+                            metadata?.display_name || metadata?.name || ''
+                        }}"
+                    />
                 </ng-template>
             </div>
 
             <!-- Details -->
-            <div class="mt-4 flex flex-col items-center lg:ml-8 lg:mt-0 lg:items-start flex-grow">
-                <div class="text-lg font-bold leading-tight max-w-full lg:max-w-[25rem] truncate"
-                    style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                    {{metadata?.display_name || metadata?.name || 'Unknown User'}}
+            <div
+                class="mt-4 flex flex-grow flex-col items-center lg:ml-8 lg:mt-0 lg:items-start"
+            >
+                <div
+                    class="max-w-full truncate text-lg font-bold leading-tight lg:max-w-[25rem]"
+                    style="
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    "
+                >
+                    {{
+                        metadata?.display_name ||
+                            metadata?.name ||
+                            'Unknown User'
+                    }}
                 </div>
-                <div class="text-secondary leading-tight max-w-full lg:max-w-[25rem] truncate"
-                    style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                    {{metadata?.username || metadata?.name}}
+                <div
+                    class="text-secondary max-w-full truncate leading-tight lg:max-w-[25rem]"
+                    style="
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    "
+                >
+                    {{ metadata?.username || metadata?.name }}
                 </div>
             </div>
 
-
             <!-- Separator -->
-            <div class="mx-8 hidden h-8 border-l-2 lg:flex flex-shrink-0"></div>
+            <div class="mx-8 hidden h-8 flex-shrink-0 border-l-2 lg:flex"></div>
 
             <!-- Stats -->
-            <div class="mt-6 flex items-center space-x-6 lg:mt-0 flex-shrink-0">
+            <div class="mt-6 flex flex-shrink-0 items-center space-x-6 lg:mt-0">
                 <div class="flex flex-col items-center">
                     <span class="font-bold">{{ followers.length }}</span>
-                    <span class="text-secondary text-sm font-medium">FOLLOWERS</span>
+                    <span class="text-secondary text-sm font-medium"
+                        >FOLLOWERS</span
+                    >
                 </div>
                 <div class="flex flex-col items-center">
                     <span class="font-bold">{{ following.length }}</span>
-                    <span class="text-secondary text-sm font-medium">FOLLOWING</span>
+                    <span class="text-secondary text-sm font-medium"
+                        >FOLLOWING</span
+                    >
                 </div>
             </div>
 
             <!-- Separator -->
-            <div class="mx-8 hidden h-8 border-l-2 lg:flex flex-shrink-0"></div>
+            <div class="mx-8 hidden h-8 flex-shrink-0 border-l-2 lg:flex"></div>
 
             <!-- Tools -->
-            <div class="mb-4 mt-8 flex items-center space-x-6 lg:m-0 lg:ml-auto flex-shrink-0">
+            <div
+                class="mb-4 mt-8 flex flex-shrink-0 items-center space-x-6 lg:m-0 lg:ml-auto"
+            >
                 <div *ngIf="!isCurrentUserProfile">
-                    <button mat-icon-button (click)="toggleFollow()" [matTooltip]="isFollowing ? 'Unfollow' : 'Follow'">
+                    <button
+                        mat-icon-button
+                        (click)="toggleFollow()"
+                        [matTooltip]="isFollowing ? 'Unfollow' : 'Follow'"
+                    >
                         <mat-icon
-                            [svgIcon]="isFollowing ? 'heroicons_outline:user-minus' : 'heroicons_outline:user-plus'">
+                            [svgIcon]="
+                                isFollowing
+                                    ? 'heroicons_outline:user-minus'
+                                    : 'heroicons_outline:user-plus'
+                            "
+                        >
                         </mat-icon>
                     </button>
                 </div>
                 <div>
                     <button mat-icon-button [matMenuTriggerFor]="profileMenu">
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:ellipsis-vertical'"
+                        ></mat-icon>
                     </button>
                     <mat-menu #profileMenu="matMenu">
-                        <button *ngIf="!isCurrentUserProfile" mat-menu-item (click)="zap()">
+                        <button
+                            *ngIf="!isCurrentUserProfile"
+                            mat-menu-item
+                            (click)="zap()"
+                        >
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'feather:zap'"></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="'feather:zap'"
+                                ></mat-icon>
                                 <span>Send Zap</span>
                             </span>
                         </button>
 
-                        <button *ngIf="isCurrentUserProfile" mat-menu-item (click)="openReceiveZapDialog()">
+                        <button
+                            *ngIf="isCurrentUserProfile"
+                            mat-menu-item
+                            (click)="openReceiveZapDialog()"
+                        >
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_outline:qr-code'" ></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="'heroicons_outline:qr-code'"
+                                ></mat-icon>
                                 <span>Receive Zap</span>
                             </span>
                         </button>
 
                         <mat-divider class="my-2"></mat-divider>
-                        <button *ngIf="isCurrentUserProfile" mat-menu-item [routerLink]="'/settings/profile'">
+                        <button
+                            *ngIf="isCurrentUserProfile"
+                            mat-menu-item
+                            [routerLink]="'/settings/profile'"
+                        >
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_outline:pencil-square'"></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="
+                                        'heroicons_outline:pencil-square'
+                                    "
+                                ></mat-icon>
                                 <span>Edit your profile</span>
                             </span>
                         </button>
 
                         <button *ngIf="!isCurrentUserProfile" mat-menu-item>
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="
-                                    'heroicons_solid:exclamation-triangle'
-                                "></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="
+                                        'heroicons_solid:exclamation-triangle'
+                                    "
+                                ></mat-icon>
                                 <span>Report</span>
                             </span>
                         </button>
                         <button *ngIf="!isCurrentUserProfile" mat-menu-item>
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="'heroicons_solid:bell'"
+                                ></mat-icon>
                                 <span>Turn on notifications</span>
                             </span>
                         </button>
                     </mat-menu>
                 </div>
             </div>
-
-
-
         </div>
-
     </div>
 
     <!-- Main -->
-    <div class="mx-auto flex w-full max-w-5xl flex-auto justify-center p-6 sm:p-8">
+    <div
+        class="mx-auto flex w-full max-w-5xl flex-auto justify-center p-6 sm:p-8"
+    >
         <!-- Column -->
         <div class="mr-8 hidden flex-col items-start lg:flex">
             <!-- About me -->
-            <angor-card *ngIf="metadata?.about && metadata.about.trim() !== ''"
-                class="flex w-full max-w-80 flex-col p-8">
+            <angor-card
+                *ngIf="metadata?.about && metadata.about.trim() !== ''"
+                class="flex w-full max-w-80 flex-col p-8"
+            >
                 <div class="text-2xl font-semibold leading-tight">About</div>
                 <div class="mt-4">
-                    {{metadata?.about || ''}}
+                    {{ metadata?.about || '' }}
                 </div>
-                <a class="mt-8 px-6" mat-flat-button [color]="'primary'" [routerLink]="['./']">
+                <a
+                    class="mt-8 px-6"
+                    mat-flat-button
+                    [color]="'primary'"
+                    [routerLink]="['./']"
+                >
                     See complete about
                 </a>
             </angor-card>
 
             <!-- Suggestion -->
-            <angor-card *ngIf="suggestions.length > 0" [ngClass]="{'mt-8': metadata?.about}"
-                class="flex w-full max-w-80 flex-col px-8 pb-4 pt-6">
+            <angor-card
+                *ngIf="suggestions.length > 0"
+                [ngClass]="{ 'mt-8': metadata?.about }"
+                class="flex w-full max-w-80 flex-col px-8 pb-4 pt-6"
+            >
                 <div class="flex items-center justify-between">
                     <div class="text-2xl font-semibold leading-tight">
                         Suggestion
                     </div>
                     <div class="-mr-3">
-                        <button mat-icon-button [matMenuTriggerFor]="listCard08Menu">
-                            <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
+                        <button
+                            mat-icon-button
+                            [matMenuTriggerFor]="listCard08Menu"
+                        >
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="'heroicons_solid:ellipsis-vertical'"
+                            ></mat-icon>
                         </button>
                         <mat-menu #listCard08Menu="matMenu">
                             <button mat-menu-item [routerLink]="['/explore']">
@@ -153,42 +243,76 @@
                     </div>
                 </div>
 
-
-                <div class="flex flex-col" *ngIf="suggestions && suggestions.length > 0">
-                    <div class="mt-6 flex justify-between" *ngFor="let i of [0, 1, 2, 3]">
+                <div
+                    class="flex flex-col"
+                    *ngIf="suggestions && suggestions.length > 0"
+                >
+                    <div
+                        class="mt-6 flex justify-between"
+                        *ngFor="let i of [0, 1, 2, 3]"
+                    >
                         <ng-container *ngIf="suggestions.length > i * 4">
-                            <img *ngFor="let j of [0, 1, 2, 3]" class="h-14 w-14 rounded-full object-cover"
-                                [src]="suggestions[i * 4 + j]?.metadata?.picture ? suggestions[i * 4 + j].metadata.picture : 'images/avatars/avatar-placeholder.png'"
-                                [alt]="suggestions[i * 4 + j]?.metadata?.name ? suggestions[i * 4 + j].metadata.name : 'image'"
+                            <img
+                                *ngFor="let j of [0, 1, 2, 3]"
+                                class="h-14 w-14 rounded-full object-cover"
+                                [src]="
+                                    suggestions[i * 4 + j]?.metadata?.picture
+                                        ? suggestions[i * 4 + j].metadata
+                                              .picture
+                                        : 'images/avatars/avatar-placeholder.png'
+                                "
+                                [alt]="
+                                    suggestions[i * 4 + j]?.metadata?.name
+                                        ? suggestions[i * 4 + j].metadata.name
+                                        : 'image'
+                                "
                                 onerror="this.onerror=null; this.src='/images/pages/profile/cover.jpg';"
-                                [matTooltip]="suggestions[i * 4 + j]?.metadata?.name ? suggestions[i * 4 + j].metadata.name : ''"
-                                [routerLink]="['/profile',suggestions[i * 4 + j].pubkey]" role="button" />
+                                [matTooltip]="
+                                    suggestions[i * 4 + j]?.metadata?.name
+                                        ? suggestions[i * 4 + j].metadata.name
+                                        : ''
+                                "
+                                [routerLink]="[
+                                    '/profile',
+                                    suggestions[i * 4 + j].pubkey,
+                                ]"
+                                role="button"
+                            />
                         </ng-container>
                     </div>
                 </div>
-
-
             </angor-card>
 
-            <!-- Groups -->
-            <angor-card class="mt-8 flex w-full max-w-80 flex-col px-8 pb-4 pt-6">
+            <!-- Last projects -->
+            <angor-card
+                class="mt-8 flex w-full max-w-80 flex-col px-8 pb-4 pt-6"
+            >
                 <div class="flex items-center justify-between">
                     <div class="text-2xl font-semibold leading-tight">
-                        Groups
+                        Last projects
                     </div>
                     <div class="-mr-3">
-                        <button mat-icon-button [matMenuTriggerFor]="listCard02Menu">
-                            <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
+                        <button
+                            mat-icon-button
+                            [matMenuTriggerFor]="listEventMenu"
+                        >
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="'heroicons_solid:ellipsis-vertical'"
+                            ></mat-icon>
                         </button>
-                        <mat-menu #listCard02Menu="matMenu">
+                        <mat-menu #listEventMenu="matMenu">
                             <button mat-menu-item>Search for groups</button>
                         </mat-menu>
                     </div>
                 </div>
                 <div class="mt-5 flex flex-col">
                     <div class="flex items-center">
-                        <img class="mr-4 h-14 w-14 rounded object-cover" src="images/cards/coffee-shop-01-320x200.jpg"
-                            alt="Card cover image" />
+                        <img
+                            class="mr-4 h-14 w-14 rounded object-cover"
+                            src="images/cards/coffee-shop-01-320x200.jpg"
+                            alt="Card cover image"
+                        />
                         <div class="flex min-w-0 flex-col">
                             <div class="font-medium leading-none">
                                 The Port Cafe
@@ -196,369 +320,397 @@
                             <div class="mt-1 truncate text-md leading-none">
                                 Best cafe of the downtown New York
                             </div>
-                            <div class="text-secondary mt-2 text-md leading-none">
+                            <div
+                                class="text-secondary mt-2 text-md leading-none"
+                            >
                                 1.2k followers
                             </div>
                         </div>
                     </div>
-                    <div class="mt-6 flex items-center">
-                        <img class="mr-4 h-14 w-14 rounded object-cover" src="images/cards/coffee-shop-02-512x512.jpg"
-                            alt="Card cover image" />
-                        <div class="flex min-w-0 flex-col">
-                            <div class="font-medium leading-none">
-                                Design House LLC.
-                            </div>
-                            <div class="mt-1 truncate text-md leading-none">
-                                UI/UX, brand and product design
-                            </div>
-                            <div class="text-secondary mt-2 text-md leading-none">
-                                957 followers
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-6 flex items-center">
-                        <img class="mr-4 h-14 w-14 rounded object-cover" src="images/cards/coffee-shop-03-320x320.jpg"
-                            alt="Card cover image" />
-                        <div class="flex min-w-0 flex-col">
-                            <div class="font-medium leading-none">
-                                Crax Laser Tag
-                            </div>
-                            <div class="mt-1 truncate text-md leading-none">
-                                30% off with group of 6 people
-                            </div>
-                            <div class="text-secondary mt-2 text-md leading-none">
-                                342 followers
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-6 flex items-center">
-                        <img class="mr-4 h-14 w-14 rounded object-cover" src="images/cards/sneakers-01-320x200.jpg"
-                            alt="Card cover image" />
-                        <div class="flex min-w-0 flex-col">
-                            <div class="font-medium leading-none">
-                                Roadster Clothing Inc.
-                            </div>
-                            <div class="mt-1 truncate text-md leading-none">
-                                $25 off on orders $500 and over
-                            </div>
-                            <div class="text-secondary mt-2 text-md leading-none">
-                                4.7k followers
-                            </div>
-                        </div>
-                    </div>
                 </div>
                 <div class="-mx-3 mt-6 flex items-center">
-                    <a class="px-3" mat-button [color]="'primary'" [routerLink]="['./']">
-                        See all groups
-                    </a>
-                </div>
-            </angor-card>
-
-            <!-- News -->
-            <angor-card class="mt-8 flex w-full max-w-80 flex-col px-8 pb-4 pt-6">
-                <div class="flex items-center justify-between">
-                    <div class="text-2xl font-semibold leading-tight">News</div>
-                    <div class="-mr-3">
-                        <button mat-icon-button [matMenuTriggerFor]="listCard01Menu">
-                            <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
-                        </button>
-                        <mat-menu #listCard01Menu="matMenu">
-                            <button mat-menu-item>Mark all as read</button>
-                        </mat-menu>
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-col">
-                    <div class="flex">
-                        <mat-icon class="mr-2 mt-0.5 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
-                        <div>
-                            <b>20% OFF</b> in your favorite hats shop on next
-                            Friday.
-                        </div>
-                    </div>
-                    <div class="mt-5 flex">
-                        <mat-icon class="mr-2 mt-0.5 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
-                        <div>
-                            Upcoming meetups within 20 miles.
-                            <a class="text-secondary whitespace-nowrap hover:underline" [routerLink]="['./']">See
-                                details
-                            </a>
-                        </div>
-                    </div>
-                    <div class="mt-5 flex">
-                        <mat-icon class="mr-2 mt-0.5 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
-                        <div>
-                            Concerts from your favorite bands available within
-                            100 miles.
-                            <a class="text-secondary whitespace-nowrap hover:underline" [routerLink]="['./']">See
-                                details
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="-mx-3 mt-4 flex items-center">
-                    <a class="px-3" mat-button [color]="'primary'" [routerLink]="['./']">
-                        See all news
-                    </a>
-                </div>
-            </angor-card>
-
-            <!-- Activity Feed -->
-            <angor-card class="mt-8 flex w-full max-w-80 flex-col px-8 pb-4 pt-6">
-                <div class="flex items-center justify-between">
-                    <div class="text-2xl font-semibold leading-tight">
-                        Activity Feed
-                    </div>
-                    <div class="-mr-3">
-                        <button mat-icon-button [matMenuTriggerFor]="listCard04Menu">
-                            <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
-                        </button>
-                        <mat-menu #listCard04Menu="matMenu">
-                            <button mat-menu-item>Clear activities</button>
-                        </mat-menu>
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-col">
-                    <div class="flex">
-                        <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                            alt="Card cover image" />
-                        <div class="flex min-w-0 flex-col">
-                            <div class="leading-tight">
-                                Amelia Edwards commented on John Silverton's
-                                photo
-                            </div>
-                            <div class="text-secondary mt-2 text-md leading-none">
-                                4 minutes ago
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-8 flex">
-                        <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                            alt="Card cover image" />
-                        <div class="flex min-w-0 flex-col">
-                            <div class="leading-tight">
-                                Lew Silverton changed his profile photo
-                            </div>
-                            <div class="text-secondary mt-2 text-md leading-none">
-                                25 minutes ago
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-8 flex">
-                        <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                            alt="Card cover image" />
-                        <div class="flex min-w-0 flex-col">
-                            <div class="leading-tight">
-                                Display Name liked your photo
-                            </div>
-                            <div class="text-secondary mt-2 text-md leading-none">
-                                3 hours ago
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-8 flex">
-                        <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                            alt="Card cover image" />
-                        <div class="flex min-w-0 flex-col">
-                            <div class="leading-tight">
-                                Marleah Eagleston commented on John Silverton's
-                                photo
-                            </div>
-                            <div class="text-secondary mt-2 text-md leading-none">
-                                Yesterday
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="-mx-3 mt-6 flex items-center">
-                    <a class="px-3" mat-button [color]="'primary'" [routerLink]="['./']">
-                        See entire activity feed
+                    <a
+                        class="px-3"
+                        mat-button
+                        [color]="'primary'"
+                        [routerLink]="['/explore']"
+                    >
+                        See all Project
                     </a>
                 </div>
             </angor-card>
         </div>
 
         <!-- Column -->
-        <div class="flex flex-col items-start">
+        <div class="flex w-full flex-col items-start">
             <!-- Create Post -->
-            <angor-card *ngIf="isCurrentUserProfile" class="flex w-full max-w-140 flex-col p-6 pb-6 sm:p-8">
-                <div class="text-xl font-semibold">Create Post</div>
+            <angor-card
+                *ngIf="isCurrentUserProfile"
+                class="mb-8 flex w-full flex-col p-6 pb-6 sm:p-8"
+            >
+                <div class="flex justify-between">
+                    <div class="text-xl font-semibold">Create Post</div>
+                    <!-- Toggle preview -->
+                    <mat-slide-toggle
+                        class="-mr-4 ml-auto"
+                        [color]="'primary'"
+                        (change)="togglePreview()"
+                    >
+                        Preview
+                    </mat-slide-toggle>
+                </div>
                 <div class="mt-8 flex flex-col items-start sm:flex-row">
                     <div class="mb-6 flex items-center sm:mb-0">
-                        <img class="mr-4 h-12 w-12 min-w-12 rounded-full object-cover"
-                            [src]="currentUserMetadata?.picture || 'images/avatars/avatar-placeholder.png'"
+                        <img
+                            class="mr-4 h-12 w-12 min-w-12 rounded-full object-cover"
+                            [src]="
+                                currentUserMetadata?.picture ||
+                                'images/avatars/avatar-placeholder.png'
+                            "
                             onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
-                            alt="{{currentUserMetadata?.display_name || currentUserMetadata?.name || 'Avatar'}}" />
-                        <div class="sm:hidden">{{currentUserMetadata?.name || 'Unknown User'}}</div>
+                            alt="{{
+                                currentUserMetadata?.display_name ||
+                                    currentUserMetadata?.name ||
+                                    'Avatar'
+                            }}"
+                        />
+                        <div class="sm:hidden">
+                            {{ currentUserMetadata?.name || 'Unknown User' }}
+                        </div>
                     </div>
-                    <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
-                        <textarea matInput [placeholder]="'What\'s on your mind?'" [rows]="3"
-                            cdkTextareaAutosize></textarea>
+                    <mat-form-field
+                        class="w-full"
+                        [subscriptSizing]="'dynamic'"
+                    >
+                        <textarea
+                            matInput
+                            [placeholder]="'What\'s on your mind?'"
+                            [rows]="3"
+                            #eventInput
+                            cdkTextareaAutosize
+                        ></textarea>
                     </mat-form-field>
                 </div>
-                <div class="-mx-3 mt-6 flex items-center sm:mt-8">
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:photo'"></mat-icon>
-                        <span class="ml-2">Photo / Video</span>
+                <div
+                    class="-mx-3 mt-6 flex items-center justify-between sm:mt-8"
+                >
+                    <div class="flex items-center">
+                        <button
+                            class="mr-1 px-3"
+                            mat-button
+                            (click)="toggleEmojiPicker()"
+                        >
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="'heroicons_solid:face-smile'"
+                            ></mat-icon>
+                            <span class="ml-2">Feeling</span>
+                        </button>
+                        <div
+                            *ngIf="showEmojiPicker"
+                            class="emoji-picker-container-global"
+                        >
+                            <emoji-mart
+                                (emojiClick)="addEmoji($event)"
+                                [darkMode]="darkMode"
+                            ></emoji-mart>
+                        </div>
+                        <button
+                            class="mr-1 hidden px-3 sm:inline-flex"
+                            mat-button
+                        >
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="'heroicons_solid:photo'"
+                            ></mat-icon>
+                            <span class="ml-2">Media</span>
+                        </button>
+
+                        <button
+                            class="mr-1 hidden px-3 sm:inline-flex"
+                            mat-button
+                        >
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="'heroicons_solid:user-circle'"
+                            ></mat-icon>
+                            <span class="ml-2">Tag</span>
+                        </button>
+
+                        <button
+                            class="px-3"
+                            mat-button
+                            [matMenuTriggerFor]="postCardMenu01"
+                        >
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="
+                                    'heroicons_solid:ellipsis-horizontal'
+                                "
+                            ></mat-icon>
+                        </button>
+
+                        <mat-menu #postCardMenu01="matMenu">
+                            <button class="sm:hidden" mat-menu-item>
+                                <span class="flex items-center">
+                                    <mat-icon
+                                        class="mr-3 icon-size-5"
+                                        [svgIcon]="
+                                            'heroicons_solid:user-circle'
+                                        "
+                                    ></mat-icon>
+                                    <span>Tag</span>
+                                </span>
+                            </button>
+                            <button class="sm:hidden" mat-menu-item>
+                                <span class="flex items-center">
+                                    <mat-icon
+                                        class="mr-3 icon-size-5"
+                                        [svgIcon]="'heroicons_solid:face-smile'"
+                                    ></mat-icon>
+                                    <span>Feeling</span>
+                                </span>
+                            </button>
+                            <button mat-menu-item>
+                                <span class="flex items-center">
+                                    <mat-icon
+                                        class="mr-3 icon-size-5"
+                                        [svgIcon]="'heroicons_solid:play'"
+                                    ></mat-icon>
+                                    <span>Live</span>
+                                </span>
+                            </button>
+                            <button mat-menu-item>
+                                <span class="flex items-center">
+                                    <mat-icon
+                                        class="mr-3 icon-size-5"
+                                        [svgIcon]="'heroicons_solid:sparkles'"
+                                    ></mat-icon>
+                                    <span>Gif</span>
+                                </span>
+                            </button>
+                            <button mat-menu-item>
+                                <span class="flex items-center">
+                                    <mat-icon
+                                        class="mr-3 icon-size-5"
+                                        [svgIcon]="'heroicons_solid:map-pin'"
+                                    ></mat-icon>
+                                    <span>Check in</span>
+                                </span>
+                            </button>
+                        </mat-menu>
+                    </div>
+
+                    <button
+                        class="mr-1 flex px-3"
+                        mat-button
+                        (click)="sendEvent()"
+                    >
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:paper-airplane'"
+                        ></mat-icon>
+                        <span class="ml-2">Send</span>
                     </button>
-                    <button class="mr-1 hidden px-3 sm:inline-flex" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
-                        <span class="ml-2">Tag Friends</span>
-                    </button>
-                    <button class="mr-1 hidden px-3 sm:inline-flex" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:face-smile'"></mat-icon>
-                        <span class="ml-2">Feeling</span>
-                    </button>
-                    <button class="px-3" mat-button [matMenuTriggerFor]="postCardMenu01">
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-horizontal'"></mat-icon>
-                    </button>
-                    <mat-menu #postCardMenu01="matMenu">
-                        <button class="sm:hidden" mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
-                                <span>Tag Friends</span>
-                            </span>
-                        </button>
-                        <button class="sm:hidden" mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:face-smile'"></mat-icon>
-                                <span>Feeling</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:play'"></mat-icon>
-                                <span>Live</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
-                                <span>Gif</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:map-pin'"></mat-icon>
-                                <span>Check in</span>
-                            </span>
-                        </button>
-                    </mat-menu>
                 </div>
             </angor-card>
 
-            <!-- Post 1 -->
-            <angor-card [ngClass]="{'mt-8': isCurrentUserProfile}" class="flex w-full max-w-140 flex-col"
-                #expandableCard02="angorCard">
+            <!-- preview -->
+            <angor-card
+                *ngIf="isPreview"
+                class="mb-8 flex w-full flex-col bg-primary-50 dark:bg-primary-800"
+                #expandableComments="angorCard"
+            >
                 <div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
-                    <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                        alt="Card cover image" />
+                    <img
+                        class="mr-4 h-10 w-10 rounded-full"
+                        [src]="
+                            currentUserMetadata?.picture ||
+                            'images/avatars/avatar-placeholder.png'
+                        "
+                        onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
+                        alt="{{
+                            currentUserMetadata?.display_name ||
+                                currentUserMetadata?.name ||
+                                'Avatar'
+                        }}"
+                    />
                     <div class="flex flex-col">
-                        <span class="font-semibold leading-none">Caroline Lundu</span>
-                        <span class="text-secondary mt-1 text-sm leading-none">29 minutes ago</span>
+                        <span class="font-semibold leading-none">{{
+                            currentUserMetadata?.display_name ||
+                                currentUserMetadata?.name
+                        }}</span>
+                        <span class="text-secondary mt-1 text-sm leading-none"
+                            >1 minutes ago</span
+                        >
                     </div>
-                    <button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu02">
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
+                    <button
+                        class="-mr-4 ml-auto"
+                        mat-icon-button
+                        [matMenuTriggerFor]="postCardMenu02"
+                    >
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:ellipsis-vertical'"
+                        ></mat-icon>
                     </button>
                     <mat-menu #postCardMenu02="matMenu">
                         <button mat-menu-item>
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:arrow-up-tray'"></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="'heroicons_solid:arrow-up-tray'"
+                                ></mat-icon>
                                 <span>Save post</span>
                             </span>
                         </button>
                         <button mat-menu-item>
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="'heroicons_solid:eye-slash'"
+                                ></mat-icon>
                                 <span>Hide post</span>
                             </span>
                         </button>
                         <button mat-menu-item>
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:clock'"></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="'heroicons_solid:clock'"
+                                ></mat-icon>
                                 <span>Snooze for 30 days</span>
                             </span>
                         </button>
                         <button mat-menu-item>
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="'heroicons_solid:minus-circle'"
+                                ></mat-icon>
                                 <span>Hide all</span>
                             </span>
                         </button>
                         <mat-divider class="my-2"></mat-divider>
                         <button mat-menu-item>
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="
                                         'heroicons_solid:exclamation-triangle'
-                                    "></mat-icon>
+                                    "
+                                ></mat-icon>
                                 <span>Report post</span>
                             </span>
                         </button>
                         <button mat-menu-item>
                             <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
+                                <mat-icon
+                                    class="mr-3 icon-size-5"
+                                    [svgIcon]="'heroicons_solid:bell'"
+                                ></mat-icon>
                                 <span>Turn on notifications for this post</span>
                             </span>
                         </button>
                     </mat-menu>
                 </div>
                 <div class="mx-6 mb-6 mt-2 sm:mx-8">
-                    Look at that sky! I so want to be there.. Can we arrange a
-                    trip? Is that a possibility? Please!!!
+                    <!-- text -->
+                    {{ eventInput.nativeElement.value }}
                 </div>
                 <div class="relative mb-4">
-                    <img class="h-80 object-cover" src="images/cards/14-640x480.jpg" alt="Card cover image" />
-                    <div class="absolute bottom-0 left-0 m-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-gray-700"
-                        [matTooltip]="'Barmouth / UK'" [matTooltipPosition]="'right'">
-                        <mat-icon class="text-gray-100 icon-size-4" [svgIcon]="'heroicons_solid:map-pin'"></mat-icon>
-                    </div>
+                    <!-- image or video -->
                 </div>
                 <div class="mx-3 flex items-center sm:mx-5">
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="text-red-500 icon-size-5" [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span class="ml-2">Unlike</span>
+                    <button class="mr-1 px-3" mat-button (click)="toggleLike()">
+                        <mat-icon
+                            class="text-red-500 icon-size-5"
+                            [ngClass]="{ 'heart-beat': isLiked }"
+                            [svgIcon]="
+                                isLiked
+                                    ? 'heroicons_solid:heart'
+                                    : 'heroicons_outline:heart'
+                            "
+                        >
+                        </mat-icon>
+                        <span class="ml-2">{{
+                            isLiked ? 'Unlike' : 'Like'
+                        }}</span>
                     </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="
+                    <button
+                        class="mr-1 px-3"
+                        mat-button
+                        (click)="
+                            expandableComments.expanded =
+                                !expandableComments.expanded
+                        "
+                    >
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="
                                 'heroicons_solid:chat-bubble-left-ellipsis'
-                            "></mat-icon>
+                            "
+                        ></mat-icon>
                         <span class="ml-2">Comment</span>
                     </button>
                     <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:share'"
+                        ></mat-icon>
                         <span class="ml-2">Share</span>
                     </button>
                 </div>
                 <hr class="mx-6 mb-6 mt-4 border-b sm:mx-8" />
-                <div class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
+                <div
+                    class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center"
+                >
                     <div class="flex items-center">
-                        <img class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
+                        <img
+                            class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
+                            src="images/avatars/avatar-placeholder.png"
+                            alt="Card cover image"
+                        />
+                        <img
+                            class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
+                            src="images/avatars/avatar-placeholder.png"
+                            alt="Card cover image"
+                        />
+                        <img
+                            class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
+                            src="images/avatars/avatar-placeholder.png"
+                            alt="Card cover image"
+                        />
+                        <img
+                            class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
+                            src="images/avatars/avatar-placeholder.png"
+                            alt="Card cover image"
+                        />
                         <div class="ml-3 text-md tracking-tight">
-                            You and 24 more liked this
+                            You and 4 more liked this
                         </div>
                     </div>
                     <div class="hidden flex-auto sm:flex"></div>
                     <div class="mt-4 flex items-center sm:mt-0">
                         <button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
-                            4 shares
+                            0 shares
                         </button>
-                        <button class="px-3 sm:-mr-4" mat-button (click)="
-                                expandableCard02.expanded =
-                                    !expandableCard02.expanded
-                            ">
-                            <span class="mr-1">5 Comments</span>
-                            <mat-icon class="rotate-0 transition-transform duration-150 ease-in-out icon-size-5"
+                        <button
+                            class="px-3 sm:-mr-4"
+                            mat-button
+                            (click)="
+                                expandableComments.expanded =
+                                    !expandableComments.expanded
+                            "
+                        >
+                            <span class="mr-1">0 Comments</span>
+                            <mat-icon
+                                class="rotate-0 transition-transform duration-150 ease-in-out icon-size-5"
                                 [ngClass]="{
-                                    'rotate-180': expandableCard02.expanded,
-                                }" [svgIcon]="'heroicons_mini:chevron-down'"></mat-icon>
+                                    'rotate-180': expandableComments.expanded,
+                                }"
+                                [svgIcon]="'heroicons_mini:chevron-down'"
+                            ></mat-icon>
                         </button>
                     </div>
                 </div>
@@ -567,781 +719,80 @@
                     <hr class="m-0 border-b" />
                     <div class="mx-4 mb-3 mt-6 flex flex-col sm:mx-8">
                         <div class="flex items-start">
-
-                            <img class="mr-5 h-12 w-12 rounded-full object-cover"
-                                [src]="currentUserMetadata?.picture || 'images/avatars/avatar-placeholder.png'"
+                            <img
+                                class="mr-5 h-12 w-12 rounded-full object-cover"
+                                [src]="
+                                    currentUserMetadata?.picture ||
+                                    'images/avatars/avatar-placeholder.png'
+                                "
                                 onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
-                                alt="{{currentUserMetadata?.display_name || currentUserMetadata?.name || 'Avatar'}}" />
+                                alt="{{
+                                    currentUserMetadata?.display_name ||
+                                        currentUserMetadata?.name ||
+                                        'Avatar'
+                                }}"
+                            />
 
-                            <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
-                                <textarea matInput [placeholder]="'Write a comment...'" [rows]="3"
-                                    cdkTextareaAutosize></textarea>
+                            <mat-form-field
+                                class="w-full"
+                                [subscriptSizing]="'dynamic'"
+                            >
+                                <textarea
+                                    matInput
+                                    [placeholder]="'Write a comment...'"
+                                    [rows]="3"
+                                    #commentInput
+                                    cdkTextareaAutosize
+                                ></textarea>
                             </mat-form-field>
                         </div>
-                        <div class="-mr-3 ml-auto mt-3 flex items-center">
-                            <button mat-icon-button>
-                                <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
+                        <div class="mt-3 flex items-center justify-between">
+                            <div class="flex items-center">
+                                <button
+                                    mat-icon-button
+                                    (click)="toggleCommentEmojiPicker()"
+                                >
+                                    <mat-icon
+                                        class="icon-size-5"
+                                        [svgIcon]="'heroicons_solid:face-smile'"
+                                    ></mat-icon>
+                                </button>
+                                <div
+                                    *ngIf="showCommentEmojiPicker"
+                                    class="emoji-picker-container-global"
+                                >
+                                    <emoji-mart
+                                        (emojiClick)="addEmojiTocomment($event)"
+                                        [darkMode]="darkMode"
+                                    ></emoji-mart>
+                                </div>
+                                <button mat-icon-button>
+                                    <mat-icon
+                                        class="icon-size-5"
+                                        [svgIcon]="'heroicons_solid:photo'"
+                                    ></mat-icon>
+                                </button>
+                                <button mat-icon-button>
+                                    <mat-icon
+                                        class="icon-size-5"
+                                        [svgIcon]="'heroicons_solid:sparkles'"
+                                    ></mat-icon>
+                                </button>
+                            </div>
+                            <button class="mr-1 flex px-3" mat-button>
+                                <mat-icon
+                                    class="icon-size-5"
+                                    [svgIcon]="'heroicons_solid:paper-airplane'"
+                                ></mat-icon>
+                                <span class="ml-2">Send</span>
                             </button>
-                            <button mat-icon-button>
-                                <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:face-smile'"></mat-icon>
-                            </button>
-                            <button mat-icon-button>
-                                <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:photo'"></mat-icon>
-                            </button>
-                        </div>
-                    </div>
-                    <hr class="mx-4 my-0 border-b sm:mx-8" />
-                    <div class="max-h-120 overflow-y-auto">
-                        <div class="relative mx-4 my-6 flex flex-col sm:mx-8">
-                            <div class="flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Rutherford Brannan</b> Oh, I’m in..
-                                        Let’s arrange a trip for the next
-                                        weekend if you want!
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Hide replies</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>17 min</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="ml-12 mt-8 flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Caroline Lundu</b> Yes!! Let's talk
-                                        about it on lunch!
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>15 min</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="ml-12 mt-8 flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Barbara Cotilla</b> Count me in !!!
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>12 min</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="mt-8 flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Alan Marti</b> The color of the sky
-                                        doesn’t look natural at all, do you
-                                        really think this is natural? I’d say
-                                        Photoshop! Your trip isn't going to
-                                        worth it since you won't be seeing this
-                                        exact sky.
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Hide replies</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>24 min</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="ml-12 mt-8 flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Caroline Lundu</b> Hey, Alan! You
-                                        must be fun at parties!
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>22 min</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="ml-12 mt-8 flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Alan Marti</b> Caroline, I'm telling
-                                        the truth, and if you cannot stand the
-                                        truth, maybe we shouldn't be friends
-                                        anymore...
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>20 min</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="ml-12 mt-8 flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Caroline Lundu</b> Dude! Relax! I'm
-                                        just messing with you...
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>18 min</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="ml-12 mt-8 flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Alan Marti</b> Sorry! I had a bad
-                                        morning, let's talk about this in couple
-                                        hours, I need to relax a bit :(
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>16 min</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="mt-8 flex items-start">
-                                <img class="mr-4 h-8 w-8 rounded-full" src="images/avatars/avatar-placeholder.png"
-                                    alt="Card cover image" />
-                                <div class="mt-0.5 flex flex-col">
-                                    <span>
-                                        <b>Marleah Eagleston</b> Count me in,
-                                        too!
-                                    </span>
-                                    <div class="text-secondary mt-2 flex items-center text-sm">
-                                        <span class="mr-2 cursor-pointer hover:underline">Like</span>
-                                        <span class="mr-2 cursor-pointer hover:underline">Reply</span>
-                                        <span class="mr-2">&bull;</span>
-                                        <span>34 min</span>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
                     </div>
                 </ng-container>
             </angor-card>
 
-            <!-- Post 2 -->
-            <angor-card class="mt-8 flex w-full max-w-140 flex-col">
-                <div class="mx-6 mb-1 mt-6 flex items-center sm:mx-8">
-                    <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                        alt="Card cover image" />
-                    <div class="flex flex-col">
-                        <span class="font-semibold leading-none">Caroline Lundu</span>
-                        <span class="text-secondary mt-1 text-sm leading-none">29 minutes ago</span>
-                    </div>
-                    <button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu08">
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
-                    </button>
-                    <mat-menu #postCardMenu08="matMenu">
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:arrow-up-tray'"></mat-icon>
-                                <span>Save post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
-                                <span>Hide post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:clock'"></mat-icon>
-                                <span>Snooze for 30 days</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                                <span>Hide all</span>
-                            </span>
-                        </button>
-                        <mat-divider class="my-2"></mat-divider>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="
-                                        'heroicons_solid:exclamation-triangle'
-                                    "></mat-icon>
-                                <span>Report post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
-                                <span>Turn on notifications for this post</span>
-                            </span>
-                        </button>
-                    </mat-menu>
-                </div>
-                <div class="m-6 sm:mx-8">
-                    <p>
-                        We'll put a happy little sky in here. We touch the
-                        canvas, the canvas takes what it wants. A little happy
-                        sunlight shining through there. Let's build some happy
-                        little clouds up here. I was blessed with a very steady
-                        hand; and it comes in very handy when you're doing these
-                        little delicate things. This is the fun part.
-                    </p>
-                    <p class="mt-4">
-                        Isn't it great to do something you can't fail at? Little
-                        trees and bushes grow however makes them happy. Trees
-                        get lonely too, so we'll give him a little friend. There
-                        are no mistakes. You can fix anything that happens.
-                    </p>
-                </div>
-                <div class="mx-3 flex items-center sm:mx-5">
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="text-red-500 icon-size-5" [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span class="ml-2">Unlike</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="
-                                'heroicons_solid:chat-bubble-left-ellipsis'
-                            "></mat-icon>
-                        <span class="ml-2">Comment</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span class="ml-2">Share</span>
-                    </button>
-                </div>
-                <hr class="mx-6 mb-6 mt-4 border-b sm:mx-8" />
-                <div class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
-                    <div class="flex items-center">
-                        <img class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <div class="ml-3 text-md tracking-tight">
-                            You and 24 more liked this
-                        </div>
-                    </div>
-                    <div class="hidden flex-auto sm:flex"></div>
-                    <div class="mt-4 flex items-center sm:mt-0">
-                        <button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
-                            4 shares
-                        </button>
-                        <button class="px-3 sm:-mr-3" mat-button>
-                            No comments
-                        </button>
-                    </div>
-                </div>
-            </angor-card>
+            <app-event-list class="mb-8 w-full" [pubkeys]="[routePubKey]"></app-event-list>
 
-            <!-- Post 3 -->
-            <angor-card class="mt-8 flex w-full max-w-140 flex-col">
-                <div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
-                    <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                        alt="Card cover image" />
-                    <div class="flex flex-col">
-                        <span class="font-semibold leading-none">Marleah Eagleston</span>
-                        <span class="text-secondary mt-1 text-sm leading-none">29 minutes ago</span>
-                    </div>
-                    <button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu04">
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
-                    </button>
-                    <mat-menu #postCardMenu04="matMenu">
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:arrow-up-tray'"></mat-icon>
-                                <span>Save post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
-                                <span>Hide post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:clock'"></mat-icon>
-                                <span>Snooze for 30 days</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                                <span>Hide all</span>
-                            </span>
-                        </button>
-                        <mat-divider class="my-2"></mat-divider>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="
-                                        'heroicons_solid:exclamation-triangle'
-                                    "></mat-icon>
-                                <span>Report post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
-                                <span>Turn on notifications for this post</span>
-                            </span>
-                        </button>
-                    </mat-menu>
-                </div>
-                <div class="mx-6 mb-6 mt-2 sm:mx-8">
-                    Look at that sky! I so want to be there.. Can we arrange a
-                    trip? Is that a possibility? Please!!!
-                </div>
-                <div class="mx-6 mb-4 flex sm:mx-8">
-                    <div class="flex h-80 pr-1">
-                        <img class="rounded object-cover" src="images/cards/17-640x480.jpg" alt="Card cover image" />
-                    </div>
-                    <div class="flex flex-col pl-1">
-                        <div class="flex h-40 pb-1">
-                            <img class="rounded object-cover" src="images/cards/18-640x480.jpg"
-                                alt="Card cover image" />
-                        </div>
-                        <div class="flex h-40 pt-1">
-                            <img class="rounded object-cover" src="images/cards/19-640x480.jpg"
-                                alt="Card cover image" />
-                        </div>
-                    </div>
-                </div>
-                <div class="mx-3 flex items-center sm:mx-5">
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="text-red-500 icon-size-5" [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span class="ml-2">Unlike</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="
-                                'heroicons_solid:chat-bubble-left-ellipsis'
-                            "></mat-icon>
-                        <span class="ml-2">Comment</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span class="ml-2">Share</span>
-                    </button>
-                </div>
-                <hr class="mx-6 mb-6 mt-4 border-b sm:mx-8" />
-                <div class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
-                    <div class="flex items-center">
-                        <img class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <div class="ml-3 text-md tracking-tight">
-                            You and 24 more liked this
-                        </div>
-                    </div>
-                    <div class="hidden flex-auto sm:flex"></div>
-                    <div class="mt-4 flex items-center sm:mt-0">
-                        <button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
-                            4 shares
-                        </button>
-                        <button class="px-3 sm:-mr-3" mat-button>
-                            No comments
-                        </button>
-                    </div>
-                </div>
-            </angor-card>
-
-            <!-- Post 4 -->
-            <angor-card class="mt-8 flex w-full max-w-140 flex-col">
-                <div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
-                    <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                        alt="Card cover image" />
-                    <div class="flex flex-col">
-                        <span class="font-medium leading-none">Caroline Lundu</span>
-                        <span class="text-secondary mt-1 text-sm leading-none">29 minutes ago</span>
-                    </div>
-                    <button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu10">
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
-                    </button>
-                    <mat-menu #postCardMenu10="matMenu">
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:arrow-up-tray'"></mat-icon>
-                                <span>Save post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
-                                <span>Hide post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:clock'"></mat-icon>
-                                <span>Snooze for 30 days</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                                <span>Hide all</span>
-                            </span>
-                        </button>
-                        <mat-divider class="my-2"></mat-divider>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="
-                                        'heroicons_solid:exclamation-triangle'
-                                    "></mat-icon>
-                                <span>Report post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
-                                <span>Turn on notifications for this post</span>
-                            </span>
-                        </button>
-                    </mat-menu>
-                </div>
-                <div class="mx-6 mb-6 mt-2 sm:mx-8">
-                    Hey!! I never saw this one, it was amazing.. I think I’m
-                    going to buy myself a set and try his technique at home!
-                </div>
-                <div class="mx-6 mb-4 sm:mx-8">
-                    <div class="flex flex-col overflow-hidden rounded border">
-                        <div class="flex h-80">
-                            <img class="object-cover" src="images/cards/36-640x480.jpg" alt="Card cover image" />
-                        </div>
-                        <div class="m-4">
-                            <div class="text-lg font-medium">
-                                Take a look behind the scenes of Rob Boss
-                                episodes
-                            </div>
-                            <div class="text-secondary mt-1">
-                                We'll put a happy little sky in here. We touch
-                                the canvas, the canvas takes what it wants. A
-                                little happy sunlight shining through there.
-                            </div>
-                            <div class="text-hint mt-2 text-sm">
-                                example.com
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="mx-3 flex items-center sm:mx-5">
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="text-red-500 icon-size-5" [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span class="ml-2">Unlike</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="
-                                'heroicons_solid:chat-bubble-left-ellipsis'
-                            "></mat-icon>
-                        <span class="ml-2">Comment</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span class="ml-2">Share</span>
-                    </button>
-                </div>
-                <hr class="mx-6 mb-6 mt-4 border-b sm:mx-8" />
-                <div class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
-                    <div class="flex items-center">
-                        <img class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <div class="ml-3 text-md tracking-tight">
-                            You and 24 more liked this
-                        </div>
-                    </div>
-                    <div class="hidden flex-auto sm:flex"></div>
-                    <div class="mt-4 flex items-center sm:mt-0">
-                        <button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
-                            4 shares
-                        </button>
-                        <button class="px-3 sm:-mr-3" mat-button>
-                            No comments
-                        </button>
-                    </div>
-                </div>
-            </angor-card>
-
-            <!-- Post 5 -->
-            <angor-card class="mt-8 flex w-full max-w-140 flex-col">
-                <div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
-                    <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                        alt="Card cover image" />
-                    <div class="flex flex-col">
-                        <span class="font-semibold leading-none">Marleah Eagleston</span>
-                        <span class="text-secondary mt-1 text-sm leading-none">29 minutes ago</span>
-                    </div>
-                    <button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu03">
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
-                    </button>
-                    <mat-menu #postCardMenu03="matMenu">
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:arrow-up-tray'"></mat-icon>
-                                <span>Save post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
-                                <span>Hide post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:clock'"></mat-icon>
-                                <span>Snooze for 30 days</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                                <span>Hide all</span>
-                            </span>
-                        </button>
-                        <mat-divider class="my-2"></mat-divider>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="
-                                        'heroicons_solid:exclamation-triangle'
-                                    "></mat-icon>
-                                <span>Report post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
-                                <span>Turn on notifications for this post</span>
-                            </span>
-                        </button>
-                    </mat-menu>
-                </div>
-                <div class="mx-6 mb-6 mt-2 sm:mx-8">
-                    Look at that sky! I so want to be there.. Can we arrange a
-                    trip? Is that a possibility? Please!!!
-                </div>
-                <div class="mx-6 mb-4 flex sm:mx-8">
-                    <div class="flex h-80 pr-1">
-                        <img class="rounded object-cover" src="images/cards/15-640x480.jpg" alt="Card cover image" />
-                    </div>
-                    <div class="flex h-80 pl-1">
-                        <img class="rounded object-cover" src="images/cards/16-640x480.jpg" alt="Card cover image" />
-                    </div>
-                </div>
-                <div class="mx-3 flex items-center sm:mx-5">
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="text-red-500 icon-size-5" [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span class="ml-2">Unlike</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="
-                                'heroicons_solid:chat-bubble-left-ellipsis'
-                            "></mat-icon>
-                        <span class="ml-2">Comment</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span class="ml-2">Share</span>
-                    </button>
-                </div>
-                <hr class="mx-6 mb-6 mt-4 border-b sm:mx-8" />
-                <div class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
-                    <div class="flex items-center">
-                        <img class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <div class="ml-3 text-md tracking-tight">
-                            You and 24 more liked this
-                        </div>
-                    </div>
-                    <div class="hidden flex-auto sm:flex"></div>
-                    <div class="mt-4 flex items-center sm:mt-0">
-                        <button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
-                            4 shares
-                        </button>
-                        <button class="px-3 sm:-mr-3" mat-button>
-                            No comments
-                        </button>
-                    </div>
-                </div>
-            </angor-card>
-
-            <!-- Post 6 -->
-            <angor-card class="mt-8 flex w-full max-w-140 flex-col">
-                <div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
-                    <img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
-                        alt="Card cover image" />
-                    <div class="flex flex-col">
-                        <span class="font-semibold leading-none">Caroline Lundu</span>
-                        <span class="text-secondary mt-1 text-sm leading-none">29 minutes ago</span>
-                    </div>
-                    <button class="-mr-4 ml-auto" mat-icon-button [matMenuTriggerFor]="postCardMenu09">
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
-                    </button>
-                    <mat-menu #postCardMenu09="matMenu">
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:arrow-up-tray'"></mat-icon>
-                                <span>Save post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:eye-slash'"></mat-icon>
-                                <span>Hide post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:clock'"></mat-icon>
-                                <span>Snooze for 30 days</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5"
-                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                                <span>Hide all</span>
-                            </span>
-                        </button>
-                        <mat-divider class="my-2"></mat-divider>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="
-                                        'heroicons_solid:exclamation-triangle'
-                                    "></mat-icon>
-                                <span>Report post</span>
-                            </span>
-                        </button>
-                        <button mat-menu-item>
-                            <span class="flex items-center">
-                                <mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
-                                <span>Turn on notifications for this post</span>
-                            </span>
-                        </button>
-                    </mat-menu>
-                </div>
-                <div class="mx-6 mb-6 mt-2 sm:mx-8">
-                    Hey!! I never saw this episode, it was amazing.. I think I’m
-                    going to buy myself a set and try his technique at home!
-                </div>
-                <div class="mx-6 mb-4 sm:mx-8">
-                    <div class="flex overflow-hidden rounded border">
-                        <div class="w-40 flex-0">
-                            <img class="h-full w-full object-cover" src="images/cards/35-640x480.jpg"
-                                alt="Card cover image" />
-                        </div>
-                        <div class="m-4">
-                            <div class="text-lg font-medium">
-                                Rob Boss - Season 09 Episode 04
-                            </div>
-                            <div class="text-secondary mt-1">
-                                We'll put a happy little sky in here. We touch
-                                the canvas, the canvas takes what it wants. A
-                                little happy sunlight shining through there.
-                            </div>
-                            <div class="text-hint mt-2 text-sm">
-                                example.com
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="mx-3 flex items-center sm:mx-5">
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="text-red-500 icon-size-5" [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span class="ml-2">Unlike</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="
-                                'heroicons_solid:chat-bubble-left-ellipsis'
-                            "></mat-icon>
-                        <span class="ml-2">Comment</span>
-                    </button>
-                    <button class="mr-1 px-3" mat-button>
-                        <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span class="ml-2">Share</span>
-                    </button>
-                </div>
-                <hr class="mx-6 mb-6 mt-4 border-b sm:mx-8" />
-                <div class="mx-6 mb-4 flex flex-col sm:mx-8 sm:mb-6 sm:flex-row sm:items-center">
-                    <div class="flex items-center">
-                        <img class="text-card m-0.5 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <img class="text-card m-0.5 -ml-3 h-6 w-6 rounded-full ring-2 ring-white"
-                            src="images/avatars/avatar-placeholder.png" alt="Card cover image" />
-                        <div class="ml-3 text-md tracking-tight">
-                            You and 24 more liked this
-                        </div>
-                    </div>
-                    <div class="hidden flex-auto sm:flex"></div>
-                    <div class="mt-4 flex items-center sm:mt-0">
-                        <button class="-ml-2 mr-1 px-3 sm:ml-0" mat-button>
-                            4 shares
-                        </button>
-                        <button class="px-3 sm:-mr-3" mat-button>
-                            No comments
-                        </button>
-                    </div>
-                </div>
-            </angor-card>
         </div>
     </div>
 </div>
diff --git a/src/app/components/profile/profile.component.scss b/src/app/components/profile/profile.component.scss
new file mode 100644
index 0000000..c117835
--- /dev/null
+++ b/src/app/components/profile/profile.component.scss
@@ -0,0 +1,51 @@
+.emoji-picker-container-global {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    width: 350px;
+    max-width: 100%;
+}
+.heart-beat {
+    animation: heartBeatAnimation 0.3s ease-in-out;
+}
+
+@keyframes heartBeatAnimation {
+    0% {
+        transform: scale(1);
+    }
+    30% {
+        transform: scale(2);
+    }
+    60% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0;
+
+    .spinner {
+        border: 4px solid rgba(0, 0, 0, 0.1);
+        border-left-color: #009fb5;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index 66287f2..bd02a7e 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -1,45 +1,63 @@
+import { AngorCardComponent } from '@angor/components/card';
+import { AngorConfigService } from '@angor/services/config';
+import { AngorConfirmationService } from '@angor/services/confirmation';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule, NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    ViewEncapsulation,
+    ElementRef,
+    OnDestroy,
     OnInit,
-    OnDestroy
-
+    ViewChild,
+    ViewEncapsulation,
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { AngorCardComponent } from '@angor/components/card';
-import { SignerService } from 'app/services/signer.service';
-import { MetadataService } from 'app/services/metadata.service';
-import { Subject, takeUntil } from 'rxjs';
-import { IndexedDBService } from 'app/services/indexed-db.service';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-import { SocialService } from 'app/services/social.service';
-import { MatDialog } from '@angular/material/dialog';
-import { LightningInvoice, LightningResponse } from 'app/types/post';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { LightningService } from 'app/services/lightning.service';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { PickerComponent } from '@ctrl/ngx-emoji-mart';
 import { bech32 } from '@scure/base';
-import { FormsModule } from '@angular/forms';
 import { QRCodeModule } from 'angularx-qrcode';
-import { Clipboard } from '@angular/cdk/clipboard';
-import { SendDialogComponent } from './zap/send-dialog/send-dialog.component';
+import { PaginatedEventService } from 'app/services/event.service';
+import { IndexedDBService } from 'app/services/indexed-db.service';
+import { LightningService } from 'app/services/lightning.service';
+import { MetadataService } from 'app/services/metadata.service';
+import { SignerService } from 'app/services/signer.service';
+import { SocialService } from 'app/services/social.service';
+import { SafeUrlPipe } from 'app/shared/pipes/safe-url.pipe';
+import { Paginator } from 'app/shared/utils';
+import { LightningInvoice, LightningResponse, Post } from 'app/types/post';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { NostrEvent } from 'nostr-tools';
+import { Subject, takeUntil } from 'rxjs';
+import { EventListComponent } from '../event-list/event-list.component';
 import { ReceiveDialogComponent } from './zap/receive-dialog/receive-dialog.component';
+import { SendDialogComponent } from './zap/send-dialog/send-dialog.component';
+
+interface Chip {
+    color?: string;
+    selected?: string;
+    name: string;
+}
 
 @Component({
     selector: 'profile',
     templateUrl: './profile.component.html',
-    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./profile.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [
         RouterLink,
@@ -56,28 +74,54 @@ import { ReceiveDialogComponent } from './zap/receive-dialog/receive-dialog.comp
         CommonModule,
         FormsModule,
         QRCodeModule,
+        PickerComponent,
+        MatSlideToggle,
+
+        SafeUrlPipe,
+        MatProgressSpinnerModule,
+        InfiniteScrollModule,
+        EventListComponent,
     ],
 })
 export class ProfileComponent implements OnInit, OnDestroy {
+    @ViewChild('eventInput', { static: false }) eventInput: ElementRef;
+    @ViewChild('commentInput') commentInput: ElementRef;
+
+    darkMode: boolean = false;
     isLoading: boolean = true;
     errorMessage: string | null = null;
     metadata: any;
     currentUserMetadata: any;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
-    private userPubKey;
-    private routePubKey;
+    public currentUserPubKey: string;
+    public routePubKey;
     followers: any[] = [];
     following: any[] = [];
     allPublicKeys: string[] = [];
-    suggestions: { pubkey: string, metadata: any }[] = [];
+    suggestions: { pubkey: string; metadata: any }[] = [];
     isCurrentUserProfile: Boolean = false;
     isFollowing = false;
 
+    showEmojiPicker = false;
+    showCommentEmojiPicker = false;
     lightningResponse: LightningResponse | null = null;
     lightningInvoice: LightningInvoice | null = null;
     sats: string;
     paymentInvoice: string = '';
     invoiceAmount: string = '?';
+    isLiked = false;
+    isPreview = false;
+    posts: Post[] = [];
+    likes: any[] = [];
+
+    paginator: Paginator;
+
+    myLikes: NostrEvent[] = [];
+    myLikedNoteIds: string[] = [];
+
+    isLoadingPosts: boolean = true;
+    noEventsMessage: string = '';
+    loadingTimeout: any;
 
 
     constructor(
@@ -90,52 +134,81 @@ export class ProfileComponent implements OnInit, OnDestroy {
         private _socialService: SocialService,
         private snackBar: MatSnackBar,
         private lightning: LightningService,
-        private _dialog: MatDialog // Add MatDialog here
+        private _dialog: MatDialog,
+        private _angorConfigService: AngorConfigService,
+        private _angorConfirmationService: AngorConfirmationService,
+        private eventService: PaginatedEventService
+    ) {
+        let baseTimeDiff = 12000;
+        let since = 0;
 
-    ) { }
+        this.paginator = new Paginator(0, since, (baseTimeDiff = baseTimeDiff));
+    }
 
     ngOnInit(): void {
-
+        this._angorConfigService.config$.subscribe((config) => {
+            if (config.scheme === 'auto') {
+                this.detectSystemTheme();
+            } else {
+                this.darkMode = config.scheme === 'dark';
+            }
+        });
         this._route.paramMap.subscribe((params) => {
             const routePubKey = params.get('pubkey');
             this.routePubKey = routePubKey;
-            const userPubKey = this._signerService.getPublicKey();
-            this.isCurrentUserProfile = routePubKey === userPubKey;
-            const pubKeyToLoad = routePubKey || userPubKey;
-            this.loadProfile(pubKeyToLoad);
+            const currentUserPubKey = this._signerService.getPublicKey();
+            this.currentUserPubKey = currentUserPubKey;
+            if (routePubKey || currentUserPubKey) {
+                this.isCurrentUserProfile = routePubKey === currentUserPubKey;
+            }
+
+            this.routePubKey = routePubKey || currentUserPubKey;
+            this.loadProfile(this.routePubKey);
             if (!routePubKey) {
                 this.isCurrentUserProfile = true;
             }
             this.loadCurrentUserProfile();
+
+
         });
 
-        this._indexedDBService.getMetadataStream()
+        this._indexedDBService
+            .getMetadataStream()
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((updatedMetadata) => {
-                if (updatedMetadata && updatedMetadata.pubkey === this.userPubKey) {
+                if (
+                    updatedMetadata &&
+                    updatedMetadata.pubkey === this.currentUserPubKey
+                ) {
                     this.currentUserMetadata = updatedMetadata.metadata;
                     this._changeDetectorRef.detectChanges();
                 }
             });
         if (this.routePubKey) {
-            this._indexedDBService.getMetadataStream()
+            this._indexedDBService
+                .getMetadataStream()
                 .pipe(takeUntil(this._unsubscribeAll))
                 .subscribe((updatedMetadata) => {
-                    if (updatedMetadata && updatedMetadata.pubkey === this.routePubKey) {
+                    if (
+                        updatedMetadata &&
+                        updatedMetadata.pubkey === this.routePubKey
+                    ) {
                         this.metadata = updatedMetadata.metadata;
                         this._changeDetectorRef.detectChanges();
                     }
                 });
         }
 
-        this._socialService.getFollowersObservable()
+        this._socialService
+            .getFollowersObservable()
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((event) => {
                 this.followers.push(event.pubkey);
                 this._changeDetectorRef.detectChanges();
             });
 
-        this._socialService.getFollowingObservable()
+        this._socialService
+            .getFollowingObservable()
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((event) => {
                 const tags = event.tags.filter((tag) => tag[0] === 'p');
@@ -144,8 +217,6 @@ export class ProfileComponent implements OnInit, OnDestroy {
                 });
                 this._changeDetectorRef.detectChanges();
             });
-
-        this.updateSuggestionList();
     }
 
     ngOnDestroy(): void {
@@ -153,6 +224,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
         this._unsubscribeAll.complete();
     }
 
+
     async loadProfile(publicKey: string): Promise<void> {
         this.isLoading = true;
         this.errorMessage = null;
@@ -160,6 +232,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
         this.metadata = null;
         this.followers = [];
         this.following = [];
+
         this._changeDetectorRef.detectChanges();
 
         if (!publicKey) {
@@ -170,27 +243,20 @@ export class ProfileComponent implements OnInit, OnDestroy {
         }
 
         try {
+           
             const userMetadata = await this._metadataService.fetchMetadataWithCache(publicKey);
             if (userMetadata) {
                 this.metadata = userMetadata;
                 this._changeDetectorRef.detectChanges();
             }
 
-            await this._socialService.getFollowers(publicKey);
+
+            this.followers = await this._socialService.getFollowers(publicKey);
             const currentUserPubKey = this._signerService.getPublicKey();
             this.isFollowing = this.followers.includes(currentUserPubKey);
 
-            await this._socialService.getFollowing(publicKey);
-
-            this._metadataService.getMetadataStream()
-                .pipe(takeUntil(this._unsubscribeAll))
-                .subscribe((updatedMetadata) => {
-                    if (updatedMetadata && updatedMetadata.pubkey === publicKey) {
-                        this.metadata = updatedMetadata;
-                        this._changeDetectorRef.detectChanges();
-                    }
-                });
-
+            this.following = await this._socialService.getFollowing(publicKey);
+            this._changeDetectorRef.detectChanges();
         } catch (error) {
             console.error('Failed to load profile data:', error);
             this.errorMessage = 'Failed to load profile data. Please try again later.';
@@ -201,25 +267,23 @@ export class ProfileComponent implements OnInit, OnDestroy {
         }
     }
 
+
     private async loadCurrentUserProfile(): Promise<void> {
         try {
             this.currentUserMetadata = null;
+            this.currentUserPubKey = this._signerService.getPublicKey();
+
+
+            const currentUserMetadata = await this._metadataService.fetchMetadataWithCache(
+                this.currentUserPubKey
+            );
 
-            this.userPubKey = this._signerService.getPublicKey();
-            const currentUserMetadata = await this._metadataService.fetchMetadataWithCache(this.userPubKey);
             if (currentUserMetadata) {
                 this.currentUserMetadata = currentUserMetadata;
-
-                this._changeDetectorRef.detectChanges();
             }
-            this._metadataService.getMetadataStream()
-                .pipe(takeUntil(this._unsubscribeAll))
-                .subscribe((updatedMetadata) => {
-                    if (updatedMetadata && updatedMetadata.pubkey === this.userPubKey) {
-                        this.currentUserMetadata = updatedMetadata;
-                        this._changeDetectorRef.detectChanges();
-                    }
-                });
+
+
+            this._changeDetectorRef.detectChanges();
         } catch (error) {
             console.error('Failed to load profile data:', error);
             this.errorMessage = 'Failed to load profile data. Please try again later.';
@@ -229,15 +293,8 @@ export class ProfileComponent implements OnInit, OnDestroy {
         }
     }
 
-    private updateSuggestionList(): void {
-        this._indexedDBService.getSuggestionUsers().then((suggestions) => {
-            this.suggestions = suggestions;
 
-            this._changeDetectorRef.detectChanges();
-        }).catch((error) => {
-            console.error('Error updating suggestion list:', error);
-        });
-    }
+
 
     getSafeUrl(url: string): SafeUrl {
         return this._sanitizer.bypassSecurityTrustUrl(url);
@@ -246,7 +303,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
     async toggleFollow(): Promise<void> {
         try {
             const userPubKey = this._signerService.getPublicKey();
-            const routePubKey = this.routePubKey || this.userPubKey;
+            const routePubKey = this.routePubKey || this.currentUserPubKey;
 
             if (!routePubKey || !userPubKey) {
                 console.error('Public key missing. Unable to toggle follow.');
@@ -257,7 +314,9 @@ export class ProfileComponent implements OnInit, OnDestroy {
                 await this._socialService.unfollow(routePubKey);
                 console.log(`Unfollowed ${routePubKey}`);
 
-                this.followers = this.followers.filter(pubkey => pubkey !== userPubKey);
+                this.followers = this.followers.filter(
+                    (pubkey) => pubkey !== userPubKey
+                );
             } else {
                 await this._socialService.follow(routePubKey);
                 console.log(`Followed ${routePubKey}`);
@@ -268,19 +327,15 @@ export class ProfileComponent implements OnInit, OnDestroy {
             this.isFollowing = !this.isFollowing;
 
             this._changeDetectorRef.detectChanges();
-
         } catch (error) {
             console.error('Failed to toggle follow:', error);
         }
     }
 
-
     openSnackBar(message: string, action: string) {
         this.snackBar.open(message, action, { duration: 1300 });
     }
 
-
-
     getLightningInfo() {
         let lightningAddress = '';
         if (this.metadata?.lud06) {
@@ -292,19 +347,29 @@ export class ProfileComponent implements OnInit, OnDestroy {
             const data = new Uint8Array(bech32.fromWords(words));
             lightningAddress = new TextDecoder().decode(Uint8Array.from(data));
         } else if (this.metadata?.lud16) {
-            lightningAddress = this.lightning.getLightningAddress(this.metadata.lud16);
+            lightningAddress = this.lightning.getLightningAddress(
+                this.metadata.lud16
+            );
         }
         if (lightningAddress !== '') {
-            this.lightning.getLightning(lightningAddress).subscribe((response) => {
-                this.lightningResponse = response;
-                if (this.lightningResponse.status === 'Failed') {
-                    this.openSnackBar('Failed to lookup lightning address', 'dismiss');
-                } else if (this.lightningResponse.callback) {
-                    this.openZapDialog(); // Open dialog when callback is available
-                } else {
-                    this.openSnackBar("couldn't find user's lightning address", 'dismiss');
-                }
-            });
+            this.lightning
+                .getLightning(lightningAddress)
+                .subscribe((response) => {
+                    this.lightningResponse = response;
+                    if (this.lightningResponse.status === 'Failed') {
+                        this.openSnackBar(
+                            'Failed to lookup lightning address',
+                            'dismiss'
+                        );
+                    } else if (this.lightningResponse.callback) {
+                        this.openZapDialog();
+                    } else {
+                        this.openSnackBar(
+                            "couldn't find user's lightning address",
+                            'dismiss'
+                        );
+                    }
+                });
         } else {
             this.openSnackBar('No lightning address found', 'dismiss');
         }
@@ -322,7 +387,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
         this._dialog.open(SendDialogComponent, {
             width: '405px',
             maxHeight: '90vh',
-            data: this.metadata
+            data: this.metadata,
         });
     }
 
@@ -330,8 +395,95 @@ export class ProfileComponent implements OnInit, OnDestroy {
         this._dialog.open(ReceiveDialogComponent, {
             width: '405px',
             maxHeight: '90vh',
-            data: this.metadata
+            data: this.metadata,
         });
     }
 
+    toggleLike() {
+        this.isLiked = !this.isLiked;
+
+        if (this.isLiked) {
+            setTimeout(() => {
+                this.isLiked = false;
+                this.isLiked = true;
+            }, 300);
+        }
+    }
+
+    addEmoji(event: any) {
+        this.eventInput.nativeElement.value += event.emoji.native;
+        this.showEmojiPicker = false;
+    }
+
+    toggleEmojiPicker() {
+        this.showCommentEmojiPicker = false;
+        this.showEmojiPicker = !this.showEmojiPicker;
+    }
+
+    addEmojiTocomment(event: any) {
+        this.commentInput.nativeElement.value += event.emoji.native;
+        this.showCommentEmojiPicker = false;
+    }
+
+    toggleCommentEmojiPicker() {
+        this.showEmojiPicker = false;
+        this.showCommentEmojiPicker = !this.showCommentEmojiPicker;
+    }
+
+    detectSystemTheme() {
+        const darkSchemeMedia = window.matchMedia(
+            '(prefers-color-scheme: dark)'
+        );
+        this.darkMode = darkSchemeMedia.matches;
+
+        darkSchemeMedia.addEventListener('change', (event) => {
+            this.darkMode = event.matches;
+        });
+    }
+
+    openConfirmationDialog(): void {
+        const dialogRef = this._angorConfirmationService.open({
+            title: 'Share Event',
+            message:
+                'Are you sure you want to share this event on your profile? <span class="font-medium">This action is permanent and cannot be undone.</span>',
+            icon: {
+                show: true,
+                name: 'heroicons_solid:share',
+                color: 'primary',
+            },
+            actions: {
+                confirm: {
+                    show: true,
+                    label: 'Yes, Share',
+                    color: 'primary',
+                },
+                cancel: {
+                    show: true,
+                    label: 'Cancel',
+                },
+            },
+            dismissible: true,
+        });
+
+        dialogRef.afterClosed().subscribe((result) => {
+            console.log(result);
+        });
+    }
+
+    togglePreview() {
+        this.isPreview = !this.isPreview;
+    }
+
+    sendEvent() {
+        if (this.eventInput.nativeElement.value != '') {
+             this.eventService
+                .sendTextEvent(this.eventInput.nativeElement.value)
+                .then(() => {
+                    this._changeDetectorRef.markForCheck();
+                })
+                .catch((error) => {
+                    console.error('Failed to send Event:', error);
+                });
+        }
+    }
 }
diff --git a/src/app/components/profile/zap/receive-dialog/receive-dialog.component.html b/src/app/components/profile/zap/receive-dialog/receive-dialog.component.html
index d42b504..30b0f00 100644
--- a/src/app/components/profile/zap/receive-dialog/receive-dialog.component.html
+++ b/src/app/components/profile/zap/receive-dialog/receive-dialog.component.html
@@ -1,7 +1,20 @@
+<div class="absolute right-0 top-0 pr-4 pt-4">
+    <button mat-icon-button [matDialogClose]="undefined">
+        <mat-icon
+            class="text-secondary"
+            [svgIcon]="'heroicons_outline:x-mark'"
+        ></mat-icon>
+    </button>
+</div>
 <h2>⚡ Receive Zap</h2>
 <mat-dialog-content *ngIf="!displayQRCode">
     <div class="preset-buttons">
-        <button mat-mini-fab color="primary" *ngFor="let button of zapButtons" (click)="invoiceAmount = button.value">
+        <button
+            mat-mini-fab
+            color="primary"
+            *ngFor="let button of zapButtons"
+            (click)="invoiceAmount = button.value"
+        >
             <mat-icon>{{ button.icon }}</mat-icon>
             <span>{{ button.label }}</span>
         </button>
@@ -9,12 +22,14 @@
     <mat-divider></mat-divider>
     <mat-form-field appearance="outline" class="sats-input">
         <mat-label>Zap Amount</mat-label>
-        <input matInput [(ngModel)]="invoiceAmount" placeholder="e.g., 100" type="number" />
+        <input
+            matInput
+            [(ngModel)]="invoiceAmount"
+            placeholder="e.g., 100"
+            type="number"
+        />
     </mat-form-field>
     <mat-dialog-actions align="end">
-        <button mat-icon-button color="warn" (click)="closeDialog()" [matTooltip]="'Close'">
-            <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
-        </button>
         <button mat-raised-button color="primary" (click)="generateInvoice()">
             Generate Invoice
         </button>
@@ -25,14 +40,22 @@
     <div *ngIf="displayQRCode" class="qrcode">
         <span>Scan with phone to pay ({{ invoiceAmount }} sats)</span>
         <mat-divider></mat-divider>
-        <qrcode [qrdata]="lightningInvoice" [matTooltip]="'Lightning Invoice'" class="qrcode-image" [errorCorrectionLevel]="'M'"></qrcode>
+        <qrcode
+            [qrdata]="lightningInvoice"
+            [matTooltip]="'Lightning Invoice'"
+            class="qrcode-image"
+            [errorCorrectionLevel]="'M'"
+        ></qrcode>
 
         <mat-dialog-actions align="center">
-            <button mat-icon-button color="warn" (click)="closeDialog()" [matTooltip]="'Close'">
-                <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
-            </button>
-            <button mat-icon-button (click)="copyInvoice()" [matTooltip]="'Copy Invoice'">
-                <mat-icon [svgIcon]="'heroicons_outline:clipboard-document'"></mat-icon>
+            <button
+                mat-icon-button
+                (click)="copyInvoice()"
+                [matTooltip]="'Copy Invoice'"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:clipboard-document'"
+                ></mat-icon>
             </button>
         </mat-dialog-actions>
     </div>
diff --git a/src/app/components/profile/zap/receive-dialog/receive-dialog.component.scss b/src/app/components/profile/zap/receive-dialog/receive-dialog.component.scss
index 5a9fdfb..c10d21e 100644
--- a/src/app/components/profile/zap/receive-dialog/receive-dialog.component.scss
+++ b/src/app/components/profile/zap/receive-dialog/receive-dialog.component.scss
@@ -4,9 +4,9 @@
     gap: 15px;
     justify-items: center;
     margin-bottom: 20px;
-  }
+}
 
-  .preset-buttons button {
+.preset-buttons button {
     font-size: 14px;
     font-weight: bold;
     width: 70px;
@@ -16,24 +16,23 @@
     align-items: center;
     justify-content: center;
     max-height: 60px !important;
-  }
+}
 
-  .sats-input {
+.sats-input {
     margin-top: 20px;
     width: 100%;
-  }
+}
 
-   .lightning-buttons {
+.lightning-buttons {
     display: flex;
     justify-content: space-evenly;
     margin: 10px 0;
-  }
+}
 
-
-  .qrcode {
+.qrcode {
     text-align: center;
-   }
+}
 
-  .qrcode-image {
+.qrcode-image {
     width: 100% !important;
-  }
+}
diff --git a/src/app/components/profile/zap/receive-dialog/receive-dialog.component.ts b/src/app/components/profile/zap/receive-dialog/receive-dialog.component.ts
index 4102050..3dd2240 100644
--- a/src/app/components/profile/zap/receive-dialog/receive-dialog.component.ts
+++ b/src/app/components/profile/zap/receive-dialog/receive-dialog.component.ts
@@ -1,19 +1,28 @@
-import { Component } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
-import { webln } from '@getalby/sdk';
-import { NgClass, CommonModule } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
+import { Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOption } from '@angular/material/core';
+import {
+    MatDialogActions,
+    MatDialogClose,
+    MatDialogContent,
+    MatDialogRef,
+} from '@angular/material/dialog';
 import { MatDivider } from '@angular/material/divider';
-import { MatLabel, MatFormField, MatFormFieldModule } from '@angular/material/form-field';
+import {
+    MatFormField,
+    MatFormFieldModule,
+    MatLabel,
+} from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltip } from '@angular/material/tooltip';
+import { webln } from '@getalby/sdk';
 import { QRCodeModule } from 'angularx-qrcode';
 import { SettingsIndexerComponent } from 'app/components/settings/indexer/indexer.component';
 import { SettingsNetworkComponent } from 'app/components/settings/network/network.component';
@@ -23,112 +32,116 @@ import { SettingsRelayComponent } from 'app/components/settings/relay/relay.comp
 import { SettingsSecurityComponent } from 'app/components/settings/security/security.component';
 
 @Component({
-  selector: 'app-receive-dialog',
-  standalone: true,
-  imports: [
-    MatSidenavModule,
-    MatButtonModule,
-    MatIconModule,
-    NgClass,
-    SettingsProfileComponent,
-    SettingsSecurityComponent,
-    SettingsNotificationsComponent,
-    SettingsRelayComponent,
-    SettingsNetworkComponent,
-    SettingsIndexerComponent,
-    FormsModule,
-    MatOption,
-    MatLabel,
-    MatFormField,
-    ReactiveFormsModule,
-    CommonModule,
-    MatSelectModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatDialogContent,
-    MatDialogActions,
-    QRCodeModule,
-    MatDivider,
-    MatTooltip
-  ],
-  templateUrl: './receive-dialog.component.html',
-  styleUrls: ['./receive-dialog.component.scss']
+    selector: 'app-receive-dialog',
+    standalone: true,
+    imports: [
+        MatSidenavModule,
+        MatButtonModule,
+        MatIconModule,
+        NgClass,
+        SettingsProfileComponent,
+        SettingsSecurityComponent,
+        SettingsNotificationsComponent,
+        SettingsRelayComponent,
+        SettingsNetworkComponent,
+        SettingsIndexerComponent,
+        FormsModule,
+        MatOption,
+        MatLabel,
+        MatFormField,
+        ReactiveFormsModule,
+        CommonModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatDialogContent,
+        MatDialogActions,
+        QRCodeModule,
+        MatDivider,
+        MatTooltip,
+        MatDialogClose,
+    ],
+    templateUrl: './receive-dialog.component.html',
+    styleUrls: ['./receive-dialog.component.scss'],
 })
 export class ReceiveDialogComponent {
-  invoiceAmount: string = '';
-  lightningInvoice: string = '';
-  displayQRCode: boolean = false;
-  nwc: any;
+    invoiceAmount: string = '';
+    lightningInvoice: string = '';
+    displayQRCode: boolean = false;
+    nwc: any;
 
-  constructor(
-    private dialogRef: MatDialogRef<ReceiveDialogComponent>,
-    private snackBar: MatSnackBar,
-    private clipboard: Clipboard
-  ) {}
+    constructor(
+        private dialogRef: MatDialogRef<ReceiveDialogComponent>,
+        private snackBar: MatSnackBar,
+        private clipboard: Clipboard
+    ) {}
 
-  zapButtons = [
-    { icon: 'thumb_up', label: '50', value: 50 },
-    { icon: 'favorite', label: '100', value: 100 },
-    { icon: 'emoji_emotions', label: '500', value: 500 },
-    { icon: 'star', label: '1k', value: 1000 },
-    { icon: 'celebration', label: '5k', value: 5000 },
-    { icon: 'rocket', label: '10k', value: 10000 },
-    { icon: 'local_fire_department', label: '100k', value: 100000 },
-    { icon: 'flash_on', label: '500k', value: 500000 },
-    { icon: 'diamond', label: '1M', value: 1000000 }
-];
+    zapButtons = [
+        { icon: 'thumb_up', label: '50', value: 50 },
+        { icon: 'favorite', label: '100', value: 100 },
+        { icon: 'emoji_emotions', label: '500', value: 500 },
+        { icon: 'star', label: '1k', value: 1000 },
+        { icon: 'celebration', label: '5k', value: 5000 },
+        { icon: 'rocket', label: '10k', value: 10000 },
+        { icon: 'local_fire_department', label: '100k', value: 100000 },
+        { icon: 'flash_on', label: '500k', value: 500000 },
+        { icon: 'diamond', label: '1M', value: 1000000 },
+    ];
 
-async generateInvoice(): Promise<void> {
-    if (!this.invoiceAmount || Number(this.invoiceAmount) <= 0) {
-      this.openSnackBar('Please enter a valid amount', 'dismiss');
-      return;
+    async generateInvoice(): Promise<void> {
+        if (!this.invoiceAmount || Number(this.invoiceAmount) <= 0) {
+            this.openSnackBar('Please enter a valid amount', 'dismiss');
+            return;
+        }
+
+        try {
+            this.nwc = new webln.NostrWebLNProvider({
+                nostrWalletConnectUrl: await this.loadNWCUrl(),
+            });
+            await this.nwc.enable();
+
+            const invoiceResponse = await this.nwc.makeInvoice({
+                amount: Number(this.invoiceAmount),
+            });
+            this.lightningInvoice = invoiceResponse.paymentRequest;
+
+            this.showQRCode();
+        } catch (error) {
+            console.error('Error generating invoice:', error);
+            this.openSnackBar('Failed to generate invoice', 'dismiss');
+        }
     }
 
-    try {
-
-        this.nwc = new webln.NostrWebLNProvider({ nostrWalletConnectUrl: await this.loadNWCUrl() });
-      await this.nwc.enable();
-
-      const invoiceResponse = await this.nwc.makeInvoice({ amount: Number(this.invoiceAmount) });
-      this.lightningInvoice = invoiceResponse.paymentRequest;
-
-      this.showQRCode();
-    } catch (error) {
-      console.error('Error generating invoice:', error);
-      this.openSnackBar('Failed to generate invoice', 'dismiss');
+    async loadNWCUrl(): Promise<string> {
+        try {
+            const nwc = webln.NostrWebLNProvider.withNewSecret();
+            await nwc.initNWC({ name: 'Angor Hub' });
+            return nwc.getNostrWalletConnectUrl();
+        } catch (error) {
+            console.error('Error initializing NWC:', error);
+            throw new Error('Failed to initialize NWC provider');
+        }
     }
-  }
 
-  async loadNWCUrl(): Promise<string> {
-    try {
-      const nwc = webln.NostrWebLNProvider.withNewSecret();
-      await nwc.initNWC({ name: 'Angor Hub' });
-      return nwc.getNostrWalletConnectUrl();
-    } catch (error) {
-      console.error('Error initializing NWC:', error);
-      throw new Error('Failed to initialize NWC provider');
+    showQRCode(): void {
+        this.displayQRCode = !this.displayQRCode;
     }
-  }
 
-  showQRCode(): void {
-    this.displayQRCode = !this.displayQRCode;
-  }
-
-  copyInvoice(): void {
-    if (this.lightningInvoice) {
-      this.clipboard.copy(this.lightningInvoice);
-      this.openSnackBar('Invoice copied', 'dismiss');
-    } else {
-      this.openSnackBar('No invoice available to copy', 'dismiss');
+    copyInvoice(): void {
+        if (this.lightningInvoice) {
+            this.clipboard.copy(this.lightningInvoice);
+            this.openSnackBar('Invoice copied', 'dismiss');
+        } else {
+            this.openSnackBar('No invoice available to copy', 'dismiss');
+        }
     }
-  }
 
-  openSnackBar(message: string, action: string): void {
-    this.snackBar.open(message, action, { duration: 1300 });
-  }
+    openSnackBar(message: string, action: string): void {
+        this.snackBar.open(message, action, { duration: 1300 });
+    }
 
-  closeDialog(): void {
-    this.dialogRef.close();
-  }
+    closeDialog(): void {
+        this.dialogRef.close();
+    }
 }
diff --git a/src/app/components/profile/zap/send-dialog/send-dialog.component.html b/src/app/components/profile/zap/send-dialog/send-dialog.component.html
index ff37667..eb2c926 100644
--- a/src/app/components/profile/zap/send-dialog/send-dialog.component.html
+++ b/src/app/components/profile/zap/send-dialog/send-dialog.component.html
@@ -1,7 +1,20 @@
+<div class="absolute right-0 top-0 pr-4 pt-4">
+    <button mat-icon-button [matDialogClose]="undefined">
+        <mat-icon
+            class="text-secondary"
+            [svgIcon]="'heroicons_outline:x-mark'"
+        ></mat-icon>
+    </button>
+</div>
 <h1>⚡ Send Zap</h1>
 <mat-dialog-content *ngIf="!showInvoiceSection || !lightningInvoice">
     <div class="preset-buttons">
-        <button mat-mini-fab color="primary" *ngFor="let button of zapButtons" (click)="sats = button.value">
+        <button
+            mat-mini-fab
+            color="primary"
+            *ngFor="let button of zapButtons"
+            (click)="sats = button.value"
+        >
             <mat-icon>{{ button.icon }}</mat-icon>
             <span>{{ button.label }}</span>
         </button>
@@ -9,13 +22,15 @@
     <mat-divider></mat-divider>
     <mat-form-field appearance="outline" class="sats-input">
         <mat-label>Zap Amount</mat-label>
-        <input matInput [(ngModel)]="sats" placeholder="e.g., 100" type="number" />
+        <input
+            matInput
+            [(ngModel)]="sats"
+            placeholder="e.g., 100"
+            type="number"
+        />
     </mat-form-field>
 
     <mat-dialog-actions align="end">
-        <button mat-icon-button color="warn" (click)="closeDialog()" [matTooltip]="'Close'">
-            <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
-        </button>
         <button mat-raised-button color="primary" (click)="sendZap()">
             Create invoice
         </button>
@@ -26,20 +41,30 @@
     <div *ngIf="displayQRCode" class="qrcode">
         <span>Scan with phone to pay ({{ invoiceAmount }} sats)</span>
         <mat-divider></mat-divider>
-        <qrcode [qrdata]="lightningInvoice" [matTooltip]="'Lightning Invoice'" [errorCorrectionLevel]="'M'"
-            class="qrcode-image"></qrcode>
+        <qrcode
+            [qrdata]="lightningInvoice"
+            [matTooltip]="'Lightning Invoice'"
+            [errorCorrectionLevel]="'M'"
+            class="qrcode-image"
+        ></qrcode>
     </div>
 
     <mat-dialog-actions align="center">
-        <button mat-icon-button color="warn" (click)="closeDialog()" [matTooltip]="'Close'">
-            <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
+        <button
+            mat-icon-button
+            (click)="copyInvoice()"
+            [matTooltip]="'Copy Invoice'"
+        >
+            <mat-icon
+                [svgIcon]="'heroicons_outline:clipboard-document'"
+            ></mat-icon>
         </button>
 
-        <button mat-icon-button (click)="copyInvoice()" [matTooltip]="'Copy Invoice'">
-            <mat-icon [svgIcon]="'heroicons_outline:clipboard-document'"></mat-icon>
-        </button>
-
-        <button  mat-icon-button (click)="payInvoice()" [matTooltip]="'Pay Invoice'">
+        <button
+            mat-icon-button
+            (click)="payInvoice()"
+            [matTooltip]="'Pay Invoice'"
+        >
             <mat-icon color="#f79318" [svgIcon]="'feather:zap'"></mat-icon>
         </button>
     </mat-dialog-actions>
diff --git a/src/app/components/profile/zap/send-dialog/send-dialog.component.scss b/src/app/components/profile/zap/send-dialog/send-dialog.component.scss
index 5a9fdfb..c10d21e 100644
--- a/src/app/components/profile/zap/send-dialog/send-dialog.component.scss
+++ b/src/app/components/profile/zap/send-dialog/send-dialog.component.scss
@@ -4,9 +4,9 @@
     gap: 15px;
     justify-items: center;
     margin-bottom: 20px;
-  }
+}
 
-  .preset-buttons button {
+.preset-buttons button {
     font-size: 14px;
     font-weight: bold;
     width: 70px;
@@ -16,24 +16,23 @@
     align-items: center;
     justify-content: center;
     max-height: 60px !important;
-  }
+}
 
-  .sats-input {
+.sats-input {
     margin-top: 20px;
     width: 100%;
-  }
+}
 
-   .lightning-buttons {
+.lightning-buttons {
     display: flex;
     justify-content: space-evenly;
     margin: 10px 0;
-  }
+}
 
-
-  .qrcode {
+.qrcode {
     text-align: center;
-   }
+}
 
-  .qrcode-image {
+.qrcode-image {
     width: 100% !important;
-  }
+}
diff --git a/src/app/components/profile/zap/send-dialog/send-dialog.component.ts b/src/app/components/profile/zap/send-dialog/send-dialog.component.ts
index 24a8f5e..b38c69a 100644
--- a/src/app/components/profile/zap/send-dialog/send-dialog.component.ts
+++ b/src/app/components/profile/zap/send-dialog/send-dialog.component.ts
@@ -1,29 +1,40 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { LightningService } from 'app/services/lightning.service';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { webln } from '@getalby/sdk';
-import { decode } from '@gandlaf21/bolt11-decode';
-import { bech32 } from '@scure/base';
-import { NgClass, CommonModule } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
+import { Component, Inject } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOption } from '@angular/material/core';
-import { MatLabel, MatFormField, MatFormFieldModule } from '@angular/material/form-field';
+import {
+    MAT_DIALOG_DATA,
+    MatDialogActions,
+    MatDialogClose,
+    MatDialogContent,
+    MatDialogRef,
+    MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatDivider } from '@angular/material/divider';
+import {
+    MatFormField,
+    MatFormFieldModule,
+    MatLabel,
+} from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltip } from '@angular/material/tooltip';
+import { decode } from '@gandlaf21/bolt11-decode';
+import { webln } from '@getalby/sdk';
+import { bech32 } from '@scure/base';
+import { QRCodeModule } from 'angularx-qrcode';
 import { SettingsIndexerComponent } from 'app/components/settings/indexer/indexer.component';
 import { SettingsNetworkComponent } from 'app/components/settings/network/network.component';
 import { SettingsNotificationsComponent } from 'app/components/settings/notifications/notifications.component';
 import { SettingsProfileComponent } from 'app/components/settings/profile/profile.component';
 import { SettingsRelayComponent } from 'app/components/settings/relay/relay.component';
 import { SettingsSecurityComponent } from 'app/components/settings/security/security.component';
-import { QRCodeModule } from 'angularx-qrcode';
-import { MatDivider } from '@angular/material/divider';
-import { MatTooltip } from '@angular/material/tooltip';
+import { LightningService } from 'app/services/lightning.service';
 
 @Component({
     selector: 'app-send-dialog',
@@ -54,10 +65,11 @@ import { MatTooltip } from '@angular/material/tooltip';
         QRCodeModule,
         MatDivider,
         MatTooltip,
-        MatDialogTitle
+        MatDialogTitle,
+        MatDialogClose,
     ],
     templateUrl: './send-dialog.component.html',
-    styleUrls: ['./send-dialog.component.scss']
+    styleUrls: ['./send-dialog.component.scss'],
 })
 export class SendDialogComponent {
     sats: string;
@@ -66,7 +78,7 @@ export class SendDialogComponent {
     showInvoiceSection: boolean = false;
     displayQRCode: boolean = false;
     invoiceAmount: string = '?';
-    nwc :any;
+    nwc: any;
     constructor(
         private dialogRef: MatDialogRef<SendDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public metadata: any,
@@ -86,7 +98,7 @@ export class SendDialogComponent {
         { icon: 'rocket', label: '10k', value: 10000 },
         { icon: 'local_fire_department', label: '100k', value: 100000 },
         { icon: 'flash_on', label: '500k', value: 500000 },
-        { icon: 'diamond', label: '1M', value: 1000000 }
+        { icon: 'diamond', label: '1M', value: 1000000 },
     ];
 
     getLightningInfo(): void {
@@ -100,20 +112,30 @@ export class SendDialogComponent {
             const data = new Uint8Array(bech32.fromWords(words));
             lightningAddress = new TextDecoder().decode(Uint8Array.from(data));
         } else if (this.metadata?.lud16) {
-            lightningAddress = this.lightning.getLightningAddress(this.metadata.lud16);
+            lightningAddress = this.lightning.getLightningAddress(
+                this.metadata.lud16
+            );
         }
 
         if (lightningAddress !== '') {
-            this.lightning.getLightning(lightningAddress).subscribe((response) => {
-                this.lightningResponse = response;
-                if (this.lightningResponse.status === 'Failed') {
-                    this.openSnackBar('Failed to lookup lightning address', 'dismiss');
-                } else if (this.lightningResponse.callback) {
-                    this.showInvoiceSection = true;
-                } else {
-                    this.openSnackBar("Couldn't find user's lightning address", 'dismiss');
-                }
-            });
+            this.lightning
+                .getLightning(lightningAddress)
+                .subscribe((response) => {
+                    this.lightningResponse = response;
+                    if (this.lightningResponse.status === 'Failed') {
+                        this.openSnackBar(
+                            'Failed to lookup lightning address',
+                            'dismiss'
+                        );
+                    } else if (this.lightningResponse.callback) {
+                        this.showInvoiceSection = true;
+                    } else {
+                        this.openSnackBar(
+                            "Couldn't find user's lightning address",
+                            'dismiss'
+                        );
+                    }
+                });
         } else {
             this.openSnackBar('No lightning address found', 'dismiss');
         }
@@ -121,8 +143,9 @@ export class SendDialogComponent {
 
     getLightningInvoice(amount: string): void {
         if (this.lightningResponse && this.lightningResponse.callback) {
-            this.lightning.getLightningInvoice(this.lightningResponse.callback, amount)
-                .subscribe(async response => {
+            this.lightning
+                .getLightningInvoice(this.lightningResponse.callback, amount)
+                .subscribe(async (response) => {
                     this.lightningInvoice = response.pr;
                     this.setInvoiceAmount(this.lightningInvoice);
                     this.showInvoiceSection = true;
@@ -134,7 +157,9 @@ export class SendDialogComponent {
     setInvoiceAmount(invoice: string): void {
         if (invoice) {
             const decodedInvoice = decode(invoice);
-            const amountSection = decodedInvoice.sections.find((s) => s.name === 'amount');
+            const amountSection = decodedInvoice.sections.find(
+                (s) => s.name === 'amount'
+            );
             if (amountSection) {
                 this.invoiceAmount = String(Number(amountSection.value) / 1000);
             }
@@ -149,29 +174,32 @@ export class SendDialogComponent {
         this.getLightningInvoice(String(Number(this.sats) * 1000));
     }
 
-
     async payInvoice(): Promise<void> {
         if (!this.lightningInvoice) {
             console.error('Lightning invoice is not set');
             return;
         }
 
-        const nwc = new webln.NostrWebLNProvider({ nostrWalletConnectUrl: await this.loadNWCUrl() });
+        const nwc = new webln.NostrWebLNProvider({
+            nostrWalletConnectUrl: await this.loadNWCUrl(),
+        });
 
         nwc.enable()
             .then(() => {
                 return nwc.sendPayment(this.lightningInvoice);
             })
-            .then(response => {
+            .then((response) => {
                 if (response && response.preimage) {
-                    console.log(`Payment successful, preimage: ${response.preimage}`);
+                    console.log(
+                        `Payment successful, preimage: ${response.preimage}`
+                    );
                     this.openSnackBar('Zapped!', 'dismiss');
                     this.dialogRef.close();
                 } else {
                     this.listenForPaymentStatus(nwc);
                 }
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error('Payment failed:', error);
                 this.openSnackBar('Failed to pay invoice', 'dismiss');
                 this.listenForPaymentStatus(nwc);
@@ -179,13 +207,14 @@ export class SendDialogComponent {
     }
 
     loadNWCUrl(): Promise<string> {
-         const nwc = webln.NostrWebLNProvider.withNewSecret();
+        const nwc = webln.NostrWebLNProvider.withNewSecret();
 
-         return nwc.initNWC({ name: 'Angor Hub' })
+        return nwc
+            .initNWC({ name: 'Angor Hub' })
             .then(() => {
                 return nwc.getNostrWalletConnectUrl();
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error('Error initializing NWC:', error);
                 throw error;
             });
@@ -194,16 +223,19 @@ export class SendDialogComponent {
     listenForPaymentStatus(nwc): void {
         const checkPaymentStatus = () => {
             nwc.sendPayment(this.lightningInvoice)
-                .then(response => {
+                .then((response) => {
                     if (response && response.preimage) {
-                        console.log('Payment confirmed, preimage:', response.preimage);
+                        console.log(
+                            'Payment confirmed, preimage:',
+                            response.preimage
+                        );
                         this.openSnackBar('Payment confirmed!', 'dismiss');
                         this.dialogRef.close();
                     } else {
                         setTimeout(checkPaymentStatus, 5000);
                     }
                 })
-                .catch(error => {
+                .catch((error) => {
                     console.error('Error checking payment status:', error);
                     setTimeout(checkPaymentStatus, 5000);
                 });
@@ -228,5 +260,4 @@ export class SendDialogComponent {
     closeDialog(): void {
         this.dialogRef.close();
     }
-
 }
diff --git a/src/app/components/settings/indexer/indexer.component.html b/src/app/components/settings/indexer/indexer.component.html
index ee0c293..7f6bfbe 100644
--- a/src/app/components/settings/indexer/indexer.component.html
+++ b/src/app/components/settings/indexer/indexer.component.html
@@ -1,12 +1,23 @@
 <div class="w-full max-w-3xl">
     <!-- Add Mainnet Indexer -->
-    <div class="w-full mb-8">
+    <div class="mb-8 w-full">
         <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
             <mat-label>Add Mainnet Indexer</mat-label>
-            <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:link'" matPrefix></mat-icon>
-            <input matInput [(ngModel)]="newMainnetIndexerUrl" placeholder="Mainnet Indexer URL" />
+            <mat-icon
+                class="icon-size-5"
+                [svgIcon]="'heroicons_solid:link'"
+                matPrefix
+            ></mat-icon>
+            <input
+                matInput
+                [(ngModel)]="newMainnetIndexerUrl"
+                placeholder="Mainnet Indexer URL"
+            />
             <button mat-icon-button matSuffix (click)="addIndexer('mainnet')">
-                <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
+                <mat-icon
+                    class="icon-size-5"
+                    [svgIcon]="'heroicons_solid:plus-circle'"
+                ></mat-icon>
             </button>
         </mat-form-field>
     </div>
@@ -15,22 +26,43 @@
     <div class="mt-8">
         <h3>Mainnet Indexers</h3>
         <div class="flex flex-col divide-y border-b border-t">
-            <div *ngFor="let indexer of mainnetIndexers; trackBy: trackByFn" class="flex flex-col py-6 sm:flex-row sm:items-center">
+            <div
+                *ngFor="let indexer of mainnetIndexers; trackBy: trackByFn"
+                class="flex flex-col py-6 sm:flex-row sm:items-center"
+            >
                 <div class="flex items-center">
                     <div class="ml-4">
                         <div class="font-medium">{{ indexer.url }}</div>
-                        <div class="text-sm text-gray-500">Primary: {{ indexer.primary ? 'Yes' : 'No' }}</div>
+                        <div class="text-sm text-gray-500">
+                            Primary: {{ indexer.primary ? 'Yes' : 'No' }}
+                        </div>
                     </div>
                 </div>
                 <div class="mt-4 flex items-center sm:ml-auto sm:mt-0">
-                    <button mat-icon-button (click)="setPrimaryIndexer('mainnet', indexer)">
-                        <mat-icon *ngIf="indexer.primary; else nonPrimaryIcon" class="text-primary" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+                    <button
+                        mat-icon-button
+                        (click)="setPrimaryIndexer('mainnet', indexer)"
+                    >
+                        <mat-icon
+                            *ngIf="indexer.primary; else nonPrimaryIcon"
+                            class="text-primary"
+                            [svgIcon]="'heroicons_solid:check-circle'"
+                        ></mat-icon>
                         <ng-template #nonPrimaryIcon>
-                            <mat-icon class="text-hint" [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
+                            <mat-icon
+                                class="text-hint"
+                                [svgIcon]="'heroicons_outline:check-circle'"
+                            ></mat-icon>
                         </ng-template>
                     </button>
-                    <button mat-icon-button (click)="removeIndexer('mainnet', indexer)">
-                        <mat-icon class="text-hint" [svgIcon]="'heroicons_outline:trash'"></mat-icon>
+                    <button
+                        mat-icon-button
+                        (click)="removeIndexer('mainnet', indexer)"
+                    >
+                        <mat-icon
+                            class="text-hint"
+                            [svgIcon]="'heroicons_outline:trash'"
+                        ></mat-icon>
                     </button>
                 </div>
             </div>
@@ -38,13 +70,24 @@
     </div>
 
     <!-- Add Testnet Indexer -->
-    <div class="w-full mb-8 mt-10">
+    <div class="mb-8 mt-10 w-full">
         <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
             <mat-label>Add Testnet Indexer</mat-label>
-            <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:link'" matPrefix></mat-icon>
-            <input matInput [(ngModel)]="newTestnetIndexerUrl" placeholder="Testnet Indexer URL" />
+            <mat-icon
+                class="icon-size-5"
+                [svgIcon]="'heroicons_solid:link'"
+                matPrefix
+            ></mat-icon>
+            <input
+                matInput
+                [(ngModel)]="newTestnetIndexerUrl"
+                placeholder="Testnet Indexer URL"
+            />
             <button mat-icon-button matSuffix (click)="addIndexer('testnet')">
-                <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
+                <mat-icon
+                    class="icon-size-5"
+                    [svgIcon]="'heroicons_solid:plus-circle'"
+                ></mat-icon>
             </button>
         </mat-form-field>
     </div>
@@ -53,22 +96,43 @@
     <div class="mt-8">
         <h3>Testnet Indexers</h3>
         <div class="flex flex-col divide-y border-b border-t">
-            <div *ngFor="let indexer of testnetIndexers; trackBy: trackByFn" class="flex flex-col py-6 sm:flex-row sm:items-center">
+            <div
+                *ngFor="let indexer of testnetIndexers; trackBy: trackByFn"
+                class="flex flex-col py-6 sm:flex-row sm:items-center"
+            >
                 <div class="flex items-center">
                     <div class="ml-4">
                         <div class="font-medium">{{ indexer.url }}</div>
-                        <div class="text-sm text-gray-500">Primary: {{ indexer.primary ? 'Yes' : 'No' }}</div>
+                        <div class="text-sm text-gray-500">
+                            Primary: {{ indexer.primary ? 'Yes' : 'No' }}
+                        </div>
                     </div>
                 </div>
                 <div class="mt-4 flex items-center sm:ml-auto sm:mt-0">
-                    <button mat-icon-button (click)="setPrimaryIndexer('testnet', indexer)">
-                        <mat-icon *ngIf="indexer.primary; else nonPrimaryIcon" class="text-primary" [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+                    <button
+                        mat-icon-button
+                        (click)="setPrimaryIndexer('testnet', indexer)"
+                    >
+                        <mat-icon
+                            *ngIf="indexer.primary; else nonPrimaryIcon"
+                            class="text-primary"
+                            [svgIcon]="'heroicons_solid:check-circle'"
+                        ></mat-icon>
                         <ng-template #nonPrimaryIcon>
-                            <mat-icon class="text-hint" [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
+                            <mat-icon
+                                class="text-hint"
+                                [svgIcon]="'heroicons_outline:check-circle'"
+                            ></mat-icon>
                         </ng-template>
                     </button>
-                    <button mat-icon-button (click)="removeIndexer('testnet', indexer)">
-                        <mat-icon class="text-hint" [svgIcon]="'heroicons_outline:trash'"></mat-icon>
+                    <button
+                        mat-icon-button
+                        (click)="removeIndexer('testnet', indexer)"
+                    >
+                        <mat-icon
+                            class="text-hint"
+                            [svgIcon]="'heroicons_outline:trash'"
+                        ></mat-icon>
                     </button>
                 </div>
             </div>
diff --git a/src/app/components/settings/indexer/indexer.component.ts b/src/app/components/settings/indexer/indexer.component.ts
index 7870489..82638c7 100644
--- a/src/app/components/settings/indexer/indexer.component.ts
+++ b/src/app/components/settings/indexer/indexer.component.ts
@@ -1,3 +1,4 @@
+import { AngorAlertComponent } from '@angor/components/alert';
 import { CommonModule, CurrencyPipe, NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -5,12 +6,7 @@ import {
     OnInit,
     ViewEncapsulation,
 } from '@angular/core';
-import {
-    FormsModule,
-    ReactiveFormsModule,
-    UntypedFormBuilder,
-    UntypedFormGroup,
-} from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -18,7 +14,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
-import { AngorAlertComponent } from '@angor/components/alert';
 import { IndexerService } from 'app/services/indexer.service';
 
 @Component({
@@ -40,59 +35,76 @@ import { IndexerService } from 'app/services/indexer.service';
         MatOptionModule,
         MatButtonModule,
         CurrencyPipe,
-        CommonModule
+        CommonModule,
     ],
 })
 export class SettingsIndexerComponent implements OnInit {
-    mainnetIndexers: Array<{ url: string, primary: boolean }> = [];
-  testnetIndexers: Array<{ url: string, primary: boolean }> = [];
-  newMainnetIndexerUrl: string = '';
-  newTestnetIndexerUrl: string = '';
+    mainnetIndexers: Array<{ url: string; primary: boolean }> = [];
+    testnetIndexers: Array<{ url: string; primary: boolean }> = [];
+    newMainnetIndexerUrl: string = '';
+    newTestnetIndexerUrl: string = '';
 
-  constructor(private indexerService: IndexerService) {}
+    constructor(private indexerService: IndexerService) {}
 
-  ngOnInit(): void {
-    this.loadIndexers();
-  }
-
-  loadIndexers(): void {
-    this.mainnetIndexers = this.indexerService.getIndexers('mainnet').map(url => ({
-      url,
-      primary: url === this.indexerService.getPrimaryIndexer('mainnet')
-    }));
-    this.testnetIndexers = this.indexerService.getIndexers('testnet').map(url => ({
-      url,
-      primary: url === this.indexerService.getPrimaryIndexer('testnet')
-    }));
-
-    console.log('Mainnet Indexers:', this.mainnetIndexers);
-    console.log('Testnet Indexers:', this.testnetIndexers);
-  }
-
-
-  addIndexer(network: 'mainnet' | 'testnet'): void {
-    if (network === 'mainnet' && this.newMainnetIndexerUrl) {
-      this.indexerService.addIndexer(this.newMainnetIndexerUrl, 'mainnet');
-      this.loadIndexers();
-      this.newMainnetIndexerUrl = '';
-    } else if (network === 'testnet' && this.newTestnetIndexerUrl) {
-      this.indexerService.addIndexer(this.newTestnetIndexerUrl, 'testnet');
-      this.loadIndexers();
-      this.newTestnetIndexerUrl = '';
+    ngOnInit(): void {
+        this.loadIndexers();
     }
-  }
 
-  removeIndexer(network: 'mainnet' | 'testnet', indexer: { url: string, primary: boolean }): void {
-    this.indexerService.removeIndexer(indexer.url, network);
-    this.loadIndexers();
-  }
+    loadIndexers(): void {
+        this.mainnetIndexers = this.indexerService
+            .getIndexers('mainnet')
+            .map((url) => ({
+                url,
+                primary:
+                    url === this.indexerService.getPrimaryIndexer('mainnet'),
+            }));
+        this.testnetIndexers = this.indexerService
+            .getIndexers('testnet')
+            .map((url) => ({
+                url,
+                primary:
+                    url === this.indexerService.getPrimaryIndexer('testnet'),
+            }));
 
-  setPrimaryIndexer(network: 'mainnet' | 'testnet', indexer: { url: string, primary: boolean }): void {
-    this.indexerService.setPrimaryIndexer(indexer.url, network);
-    this.loadIndexers();
-  }
+        console.log('Mainnet Indexers:', this.mainnetIndexers);
+        console.log('Testnet Indexers:', this.testnetIndexers);
+    }
 
-  trackByFn(index: number, item: any): any {
-    return item.url;
-  }
+    addIndexer(network: 'mainnet' | 'testnet'): void {
+        if (network === 'mainnet' && this.newMainnetIndexerUrl) {
+            this.indexerService.addIndexer(
+                this.newMainnetIndexerUrl,
+                'mainnet'
+            );
+            this.loadIndexers();
+            this.newMainnetIndexerUrl = '';
+        } else if (network === 'testnet' && this.newTestnetIndexerUrl) {
+            this.indexerService.addIndexer(
+                this.newTestnetIndexerUrl,
+                'testnet'
+            );
+            this.loadIndexers();
+            this.newTestnetIndexerUrl = '';
+        }
+    }
+
+    removeIndexer(
+        network: 'mainnet' | 'testnet',
+        indexer: { url: string; primary: boolean }
+    ): void {
+        this.indexerService.removeIndexer(indexer.url, network);
+        this.loadIndexers();
+    }
+
+    setPrimaryIndexer(
+        network: 'mainnet' | 'testnet',
+        indexer: { url: string; primary: boolean }
+    ): void {
+        this.indexerService.setPrimaryIndexer(indexer.url, network);
+        this.loadIndexers();
+    }
+
+    trackByFn(index: number, item: any): any {
+        return item.url;
+    }
 }
diff --git a/src/app/components/settings/network/network.component.html b/src/app/components/settings/network/network.component.html
index 08cef75..c660ae4 100644
--- a/src/app/components/settings/network/network.component.html
+++ b/src/app/components/settings/network/network.component.html
@@ -46,11 +46,18 @@
 </div>
 
 <!-- Divider -->
-<div class="mb-10 mt-11 border-t w-full max-w-3xl"></div>
+<div class="mb-10 mt-11 w-full max-w-3xl border-t"></div>
 
 <!-- Actions -->
-<div class="flex items-center justify-end w-full max-w-3xl">
+<div class="flex w-full max-w-3xl items-center justify-end">
     <button mat-stroked-button type="button" (click)="cancel()">Cancel</button>
-    <button mat-flat-button class="ml-4" type="button" color="primary" (click)="save()">Save</button>
+    <button
+        mat-flat-button
+        class="ml-4"
+        type="button"
+        color="primary"
+        (click)="save()"
+    >
+        Save
+    </button>
 </div>
-
diff --git a/src/app/components/settings/network/network.component.ts b/src/app/components/settings/network/network.component.ts
index 9a4b51f..d9b48c2 100644
--- a/src/app/components/settings/network/network.component.ts
+++ b/src/app/components/settings/network/network.component.ts
@@ -1,7 +1,12 @@
 import { AngorAlertComponent } from '@angor/components/alert';
-import { NgClass, CurrencyPipe, CommonModule } from '@angular/common';
+import { CommonModule, CurrencyPipe, NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+    FormBuilder,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -12,49 +17,52 @@ import { MatSelectModule } from '@angular/material/select';
 import { IndexerService } from 'app/services/indexer.service';
 
 @Component({
-  selector: 'settings-network',
-  templateUrl: './network.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    AngorAlertComponent,
-    MatRadioModule,
-    NgClass,
-    MatIconModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatOptionModule,
-    MatButtonModule,
-    CurrencyPipe,
-    CommonModule
-  ],
+    selector: 'settings-network',
+    templateUrl: './network.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        AngorAlertComponent,
+        MatRadioModule,
+        NgClass,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatOptionModule,
+        MatButtonModule,
+        CurrencyPipe,
+        CommonModule,
+    ],
 })
 export class SettingsNetworkComponent implements OnInit {
     networkForm: FormGroup;
     selectedNetwork: 'mainnet' | 'testnet' = 'testnet';
-    constructor(private fb: FormBuilder, private indexerService: IndexerService) {}
+    constructor(
+        private fb: FormBuilder,
+        private indexerService: IndexerService
+    ) {}
 
     ngOnInit(): void {
-       this.networkForm = this.fb.group({
-        network: [this.indexerService.getNetwork()]
-      });
+        this.networkForm = this.fb.group({
+            network: [this.indexerService.getNetwork()],
+        });
 
-       this.selectedNetwork = this.indexerService.getNetwork();
+        this.selectedNetwork = this.indexerService.getNetwork();
     }
 
     setNetwork(network: 'mainnet' | 'testnet'): void {
-      this.selectedNetwork = network;
-      this.indexerService.setNetwork(this.selectedNetwork);
+        this.selectedNetwork = network;
+        this.indexerService.setNetwork(this.selectedNetwork);
     }
 
     save(): void {
-       this.indexerService.setNetwork(this.selectedNetwork);
-     }
+        this.indexerService.setNetwork(this.selectedNetwork);
+    }
 
     cancel(): void {
-       this.selectedNetwork = this.indexerService.getNetwork();
+        this.selectedNetwork = this.indexerService.getNetwork();
     }
 }
diff --git a/src/app/components/settings/notifications/notifications.component.html b/src/app/components/settings/notifications/notifications.component.html
index 6827fdb..2fa186a 100644
--- a/src/app/components/settings/notifications/notifications.component.html
+++ b/src/app/components/settings/notifications/notifications.component.html
@@ -5,38 +5,78 @@
         <div class="mt-8 grid w-full grid-cols-1 gap-6">
             <!-- Mention -->
             <div class="flex items-center justify-between">
-                <div class="flex-auto cursor-pointer" (click)="mentionToggle.toggle()">
+                <div
+                    class="flex-auto cursor-pointer"
+                    (click)="mentionToggle.toggle()"
+                >
                     <div class="font-medium leading-6">Mention</div>
-                    <div class="text-secondary text-md">Receive notifications when someone mentions you.</div>
+                    <div class="text-secondary text-md">
+                        Receive notifications when someone mentions you.
+                    </div>
                 </div>
-                <mat-slide-toggle class="ml-2" [color]="'primary'" [formControlName]="'mention'" #mentionToggle></mat-slide-toggle>
+                <mat-slide-toggle
+                    class="ml-2"
+                    [color]="'primary'"
+                    [formControlName]="'mention'"
+                    #mentionToggle
+                ></mat-slide-toggle>
             </div>
 
             <!-- Private Message -->
             <div class="flex items-center justify-between">
-                <div class="flex-auto cursor-pointer" (click)="privateMessageToggle.toggle()">
+                <div
+                    class="flex-auto cursor-pointer"
+                    (click)="privateMessageToggle.toggle()"
+                >
                     <div class="font-medium leading-6">Private Message</div>
-                    <div class="text-secondary text-md">Receive notifications for private messages.</div>
+                    <div class="text-secondary text-md">
+                        Receive notifications for private messages.
+                    </div>
                 </div>
-                <mat-slide-toggle class="ml-2" [color]="'primary'" [formControlName]="'privateMessage'" #privateMessageToggle></mat-slide-toggle>
+                <mat-slide-toggle
+                    class="ml-2"
+                    [color]="'primary'"
+                    [formControlName]="'privateMessage'"
+                    #privateMessageToggle
+                ></mat-slide-toggle>
             </div>
 
             <!-- Zap -->
             <div class="flex items-center justify-between">
-                <div class="flex-auto cursor-pointer" (click)="zapToggle.toggle()">
+                <div
+                    class="flex-auto cursor-pointer"
+                    (click)="zapToggle.toggle()"
+                >
                     <div class="font-medium leading-6">Zap</div>
-                    <div class="text-secondary text-md">Receive notifications when you get a zap.</div>
+                    <div class="text-secondary text-md">
+                        Receive notifications when you get a zap.
+                    </div>
                 </div>
-                <mat-slide-toggle class="ml-2" [color]="'primary'" [formControlName]="'zap'" #zapToggle></mat-slide-toggle>
+                <mat-slide-toggle
+                    class="ml-2"
+                    [color]="'primary'"
+                    [formControlName]="'zap'"
+                    #zapToggle
+                ></mat-slide-toggle>
             </div>
 
             <!-- New Follower -->
             <div class="flex items-center justify-between">
-                <div class="flex-auto cursor-pointer" (click)="followerToggle.toggle()">
+                <div
+                    class="flex-auto cursor-pointer"
+                    (click)="followerToggle.toggle()"
+                >
                     <div class="font-medium leading-6">New Follower</div>
-                    <div class="text-secondary text-md">Receive notifications when someone follows you.</div>
+                    <div class="text-secondary text-md">
+                        Receive notifications when someone follows you.
+                    </div>
                 </div>
-                <mat-slide-toggle class="ml-2" [color]="'primary'" [formControlName]="'follower'" #followerToggle></mat-slide-toggle>
+                <mat-slide-toggle
+                    class="ml-2"
+                    [color]="'primary'"
+                    [formControlName]="'follower'"
+                    #followerToggle
+                ></mat-slide-toggle>
             </div>
         </div>
 
@@ -45,7 +85,15 @@
         <!-- Actions -->
         <div class="flex items-center justify-end">
             <button mat-stroked-button type="button">Cancel</button>
-            <button class="ml-4" mat-flat-button type="button" [color]="'primary'" (click)="saveSettings()">Save</button>
+            <button
+                class="ml-4"
+                mat-flat-button
+                type="button"
+                [color]="'primary'"
+                (click)="saveSettings()"
+            >
+                Save
+            </button>
         </div>
     </form>
 </div>
diff --git a/src/app/components/settings/notifications/notifications.component.ts b/src/app/components/settings/notifications/notifications.component.ts
index a9cddbe..cc88eb7 100644
--- a/src/app/components/settings/notifications/notifications.component.ts
+++ b/src/app/components/settings/notifications/notifications.component.ts
@@ -42,7 +42,9 @@ export class SettingsNotificationsComponent implements OnInit {
 
         this.notificationsForm = this._formBuilder.group({
             mention: [savedSettings.includes(this.notificationKinds.mention)],
-            privateMessage: [savedSettings.includes(this.notificationKinds.privateMessage)],
+            privateMessage: [
+                savedSettings.includes(this.notificationKinds.privateMessage),
+            ],
             zap: [savedSettings.includes(this.notificationKinds.zap)],
             follower: [savedSettings.includes(this.notificationKinds.follower)],
         });
@@ -75,6 +77,6 @@ export class SettingsNotificationsComponent implements OnInit {
 
     private loadNotificationSettings(): number[] {
         const storedSettings = localStorage.getItem('notificationSettings');
-        return storedSettings ? JSON.parse(storedSettings) : [1, 3, 4, 9735]; // Default to all kinds if not set
+        return storedSettings ? JSON.parse(storedSettings) : [1, 3, 4, 7, 9735]; // Default to all kinds if not set
     }
 }
diff --git a/src/app/components/settings/profile/profile.component.html b/src/app/components/settings/profile/profile.component.html
index db3a2ec..d9fdd56 100644
--- a/src/app/components/settings/profile/profile.component.html
+++ b/src/app/components/settings/profile/profile.component.html
@@ -3,7 +3,7 @@
     <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
         <!-- Section -->
         <div class="w-full">
-             <div class="text-secondary">
+            <div class="text-secondary">
                 Following information is publicly displayed, be careful!
             </div>
         </div>
@@ -13,7 +13,11 @@
             <div class="sm:col-span-4">
                 <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
                     <mat-label>Name</mat-label>
-                    <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:user'" matPrefix></mat-icon>
+                    <mat-icon
+                        class="icon-size-5"
+                        [svgIcon]="'heroicons_solid:user'"
+                        matPrefix
+                    ></mat-icon>
                     <input [formControlName]="'name'" matInput />
                 </mat-form-field>
             </div>
@@ -46,10 +50,16 @@
             <div class="sm:col-span-4">
                 <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
                     <mat-label>About</mat-label>
-                    <textarea matInput [formControlName]="'about'" cdkTextareaAutosize [cdkAutosizeMinRows]="5"></textarea>
+                    <textarea
+                        matInput
+                        [formControlName]="'about'"
+                        cdkTextareaAutosize
+                        [cdkAutosizeMinRows]="5"
+                    ></textarea>
                 </mat-form-field>
                 <div class="text-hint mt-1 text-md">
-                    Brief description for your profile. Basic HTML and Emoji are allowed.
+                    Brief description for your profile. Basic HTML and Emoji are
+                    allowed.
                 </div>
             </div>
 
@@ -69,45 +79,51 @@
                 </mat-form-field>
             </div>
 
-          <!-- LUD06 -->
-<div class="sm:col-span-4">
-    <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
-        <mat-label>LUD06</mat-label>
-        <input [formControlName]="'lud06'" matInput />
-        <mat-hint>
-            LUD06 is an LNURL (Lightning Network URL) for receiving Bitcoin payments over the Lightning Network.
-        </mat-hint>
-    </mat-form-field>
-</div>
+            <!-- LUD06 -->
+            <div class="sm:col-span-4">
+                <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
+                    <mat-label>LUD06</mat-label>
+                    <input [formControlName]="'lud06'" matInput />
+                    <mat-hint>
+                        LUD06 is an LNURL (Lightning Network URL) for receiving
+                        Bitcoin payments over the Lightning Network.
+                    </mat-hint>
+                </mat-form-field>
+            </div>
 
-<!-- LUD16 -->
-<div class="sm:col-span-4">
-    <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
-        <mat-label>LUD16</mat-label>
-        <input [formControlName]="'lud16'" matInput />
-        <mat-hint>
-            LUD16 is a Lightning address, similar to an email format, used to receive Bitcoin payments via the Lightning Network.
-        </mat-hint>
-    </mat-form-field>
-</div>
-
-<!-- NIP05 -->
-<div class="sm:col-span-4">
-    <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
-        <mat-label>NIP05</mat-label>
-        <input [formControlName]="'nip05'" matInput />
-        <mat-hint>
-            NIP05 provides a user-friendly identifier for Nostr, similar to an email address, to help identify and verify your public identity.
-        </mat-hint>
-    </mat-form-field>
-</div>
+            <!-- LUD16 -->
+            <div class="sm:col-span-4">
+                <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
+                    <mat-label>LUD16</mat-label>
+                    <input [formControlName]="'lud16'" matInput />
+                    <mat-hint>
+                        LUD16 is a Lightning address, similar to an email
+                        format, used to receive Bitcoin payments via the
+                        Lightning Network.
+                    </mat-hint>
+                </mat-form-field>
+            </div>
 
+            <!-- NIP05 -->
+            <div class="sm:col-span-4">
+                <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
+                    <mat-label>NIP05</mat-label>
+                    <input [formControlName]="'nip05'" matInput />
+                    <mat-hint>
+                        NIP05 provides a user-friendly identifier for Nostr,
+                        similar to an email address, to help identify and verify
+                        your public identity.
+                    </mat-hint>
+                </mat-form-field>
+            </div>
         </div>
 
         <!-- Actions -->
-        <div class="flex items-center justify-end mt-8">
+        <div class="mt-8 flex items-center justify-end">
             <button mat-stroked-button type="button">Cancel</button>
-            <button class="ml-4" mat-flat-button type="submit" color="primary">Save</button>
+            <button class="ml-4" mat-flat-button type="submit" color="primary">
+                Save
+            </button>
         </div>
     </form>
 </div>
diff --git a/src/app/components/settings/profile/profile.component.ts b/src/app/components/settings/profile/profile.component.ts
index 608e36b..c85b17e 100644
--- a/src/app/components/settings/profile/profile.component.ts
+++ b/src/app/components/settings/profile/profile.component.ts
@@ -1,10 +1,21 @@
-import { MatDialog } from '@angular/material/dialog';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    OnInit,
+    ViewEncapsulation,
+} from '@angular/core';
+import {
+    FormBuilder,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -14,9 +25,9 @@ import { hexToBytes } from '@noble/hashes/utils';
 import { MetadataService } from 'app/services/metadata.service';
 import { RelayService } from 'app/services/relay.service';
 import { SignerService } from 'app/services/signer.service';
-import { UnsignedEvent, NostrEvent, finalizeEvent } from 'nostr-tools';
 import { PasswordDialogComponent } from 'app/shared/password-dialog/password-dialog.component';
- 
+import { NostrEvent, UnsignedEvent, finalizeEvent } from 'nostr-tools';
+
 @Component({
     selector: 'settings-profile',
     templateUrl: './profile.component.html',
@@ -33,7 +44,7 @@ import { PasswordDialogComponent } from 'app/shared/password-dialog/password-dia
         MatSelectModule,
         MatOptionModule,
         MatButtonModule,
-        CommonModule
+        CommonModule,
     ],
 })
 export class SettingsProfileComponent implements OnInit {
@@ -46,8 +57,8 @@ export class SettingsProfileComponent implements OnInit {
         private metadataService: MetadataService,
         private relayService: RelayService,
         private router: Router,
-        private dialog: MatDialog,
-     ) { }
+        private dialog: MatDialog
+    ) {}
 
     ngOnInit(): void {
         this.profileForm = this.fb.group({
@@ -59,15 +70,23 @@ export class SettingsProfileComponent implements OnInit {
             picture: [''],
             banner: [''],
             lud06: [''],
-            lud16: ['', Validators.pattern("^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4}$")],
-            nip05: ['', Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")]
+            lud16: [
+                '',
+                Validators.pattern('^[a-z0-9._-]+@[a-z0-9.-]+.[a-z]{2,4}$'),
+            ],
+            nip05: [
+                '',
+                Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$'),
+            ],
         });
 
         this.setValues();
     }
 
     async setValues() {
-        let kind0 = await this.metadataService.getUserMetadata(this.signerService.getPublicKey());
+        let kind0 = await this.metadataService.getUserMetadata(
+            this.signerService.getPublicKey()
+        );
         if (kind0) {
             this.profileForm.setValue({
                 name: kind0.name || '',
@@ -100,7 +119,8 @@ export class SettingsProfileComponent implements OnInit {
             const storedPassword = this.signerService.getPassword();
             if (storedPassword) {
                 try {
-                    const privateKey = await this.signerService.getSecretKey(storedPassword);
+                    const privateKey =
+                        await this.signerService.getSecretKey(storedPassword);
                     this.signEvent(privateKey);
                 } catch (error) {
                     console.error(error);
@@ -108,46 +128,54 @@ export class SettingsProfileComponent implements OnInit {
             } else {
                 const dialogRef = this.dialog.open(PasswordDialogComponent, {
                     width: '300px',
-                    disableClose: true
+                    disableClose: true,
                 });
 
-                dialogRef.afterClosed().subscribe(async result => {
+                dialogRef.afterClosed().subscribe(async (result) => {
                     if (result && result.password) {
                         try {
-                            const privateKey = await this.signerService.getSecretKey(result.password);
+                            const privateKey =
+                                await this.signerService.getSecretKey(
+                                    result.password
+                                );
                             this.signEvent(privateKey);
                             if (result.duration != 0) {
-                                this.signerService.savePassword(result.password, result.duration);
+                                this.signerService.savePassword(
+                                    result.password,
+                                    result.duration
+                                );
                             }
                         } catch (error) {
                             console.error(error);
-
                         }
-
                     } else {
                         console.error('Password not provided');
                     }
                 });
             }
-
-
         } else if (this.signerService.isUsingExtension()) {
-            const unsignedEvent: UnsignedEvent = this.signerService.getUnsignedEvent(0, [], this.content);
-            const signedEvent = await this.signerService.signEventWithExtension(unsignedEvent);
+            const unsignedEvent: UnsignedEvent =
+                this.signerService.getUnsignedEvent(0, [], this.content);
+            const signedEvent =
+                await this.signerService.signEventWithExtension(unsignedEvent);
             this.publishSignedEvent(signedEvent);
         }
     }
 
     async signEvent(privateKey: string) {
-        const unsignedEvent: UnsignedEvent = this.signerService.getUnsignedEvent(0, [], this.content);
+        const unsignedEvent: UnsignedEvent =
+            this.signerService.getUnsignedEvent(0, [], this.content);
         const privateKeyBytes = hexToBytes(privateKey);
-        const signedEvent: NostrEvent = finalizeEvent(unsignedEvent, privateKeyBytes);
+        const signedEvent: NostrEvent = finalizeEvent(
+            unsignedEvent,
+            privateKeyBytes
+        );
         this.publishSignedEvent(signedEvent);
     }
 
     publishSignedEvent(signedEvent: NostrEvent) {
         this.relayService.publishEventToRelays(signedEvent);
-        console.log("Profile Updated!");
+        console.log('Profile Updated!');
         this.router.navigate([`/profile`]);
     }
 }
diff --git a/src/app/components/settings/relay/relay.component.html b/src/app/components/settings/relay/relay.component.html
index 8f4b00f..cd5116e 100644
--- a/src/app/components/settings/relay/relay.component.html
+++ b/src/app/components/settings/relay/relay.component.html
@@ -3,42 +3,72 @@
     <div class="w-full">
         <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
             <mat-label>Add Relay</mat-label>
-            <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:link'" matPrefix></mat-icon>
+            <mat-icon
+                class="icon-size-5"
+                [svgIcon]="'heroicons_solid:link'"
+                matPrefix
+            ></mat-icon>
             <input matInput [(ngModel)]="newRelayUrl" placeholder="Relay URL" />
             <button mat-icon-button matSuffix (click)="addRelay()">
-                <mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
+                <mat-icon
+                    class="icon-size-5"
+                    [svgIcon]="'heroicons_solid:plus-circle'"
+                ></mat-icon>
             </button>
         </mat-form-field>
     </div>
 
     <!-- Relays -->
     <div class="mt-8 flex flex-col divide-y border-b border-t">
-        <div *ngFor="let relay of relays; trackBy: trackByFn" class="flex flex-col py-6 sm:flex-row sm:items-center">
+        <div
+            *ngFor="let relay of relays; trackBy: trackByFn"
+            class="flex flex-col py-6 sm:flex-row sm:items-center"
+        >
             <div class="flex items-center">
-                <div class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full">
-                    <img class="h-full w-full object-cover" [src]="getSafeUrl(relayFavIcon(relay.url))"
-                        onerror="this.src='/images/avatars/avatar-placeholder.png'" alt="relay avatar" />
-
+                <div
+                    class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full"
+                >
+                    <img
+                        class="h-full w-full object-cover"
+                        [src]="getSafeUrl(relayFavIcon(relay.url))"
+                        onerror="this.src='/images/avatars/avatar-placeholder.png'"
+                        alt="relay avatar"
+                    />
                 </div>
                 <div class="ml-4">
                     <div class="font-medium">{{ relay.url }}</div>
-                    <div class="text-sm" [ngClass]="getRelayStatusClass(relay)">Status: {{ getRelayStatus(relay) }}
+                    <div class="text-sm" [ngClass]="getRelayStatusClass(relay)">
+                        Status: {{ getRelayStatus(relay) }}
                     </div>
                 </div>
             </div>
             <div class="mt-4 flex items-center sm:ml-auto sm:mt-0">
-                <mat-form-field class="angor-mat-dense w-50" [subscriptSizing]="'dynamic'">
-                    <mat-select [(ngModel)]="relay.accessType" (selectionChange)="updateRelayAccess(relay)">
+                <mat-form-field
+                    class="angor-mat-dense w-50"
+                    [subscriptSizing]="'dynamic'"
+                >
+                    <mat-select
+                        [(ngModel)]="relay.accessType"
+                        (selectionChange)="updateRelayAccess(relay)"
+                    >
                         <mat-select-trigger class="text-md">
-                            <span class="ml-1 font-medium">{{ relay.accessType | titlecase }}</span>
+                            <span class="ml-1 font-medium">{{
+                                relay.accessType | titlecase
+                            }}</span>
                         </mat-select-trigger>
-                        <mat-option *ngFor="let option of accessOptions" [value]="option.value">
+                        <mat-option
+                            *ngFor="let option of accessOptions"
+                            [value]="option.value"
+                        >
                             <div class="font-medium">{{ option.label }}</div>
                         </mat-option>
                     </mat-select>
                 </mat-form-field>
                 <button mat-icon-button (click)="removeRelay(relay.url)">
-                    <mat-icon class="text-hint" [svgIcon]="'heroicons_outline:trash'"></mat-icon>
+                    <mat-icon
+                        class="text-hint"
+                        [svgIcon]="'heroicons_outline:trash'"
+                    ></mat-icon>
                 </button>
             </div>
         </div>
diff --git a/src/app/components/settings/relay/relay.component.ts b/src/app/components/settings/relay/relay.component.ts
index 45acc34..e81e548 100644
--- a/src/app/components/settings/relay/relay.component.ts
+++ b/src/app/components/settings/relay/relay.component.ts
@@ -1,11 +1,11 @@
 import { CommonModule, TitleCasePipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
+    NgZone,
     OnInit,
     ViewEncapsulation,
-    ChangeDetectorRef,
-    NgZone,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -52,7 +52,7 @@ export class SettingsRelayComponent implements OnInit {
     ngOnInit(): void {
         // Subscribe to relays observable
         this.subscriptions.add(
-            this.relayService.getRelays().subscribe(relays => {
+            this.relayService.getRelays().subscribe((relays) => {
                 this.zone.run(() => {
                     this.relays = relays;
                     this.cdr.markForCheck(); // Mark the component for check
@@ -65,17 +65,20 @@ export class SettingsRelayComponent implements OnInit {
             {
                 label: 'Read',
                 value: 'read',
-                description: 'Reads only, does not write, unless explicitly specified on publish action.',
+                description:
+                    'Reads only, does not write, unless explicitly specified on publish action.',
             },
             {
                 label: 'Write',
                 value: 'write',
-                description: 'Writes your events, profile, and other metadata updates. Connects on-demand.',
+                description:
+                    'Writes your events, profile, and other metadata updates. Connects on-demand.',
             },
             {
                 label: 'Read and Write',
                 value: 'read-write',
-                description: 'Reads and writes events, profiles, and other metadata. Always connected.',
+                description:
+                    'Reads and writes events, profiles, and other metadata. Always connected.',
             },
         ];
     }
@@ -113,13 +116,14 @@ export class SettingsRelayComponent implements OnInit {
     }
 
     relayFavIcon(url: string): string {
-        let safeUrl = url.replace('wss://', 'https://').replace('ws://', 'https://');
+        let safeUrl = url
+            .replace('wss://', 'https://')
+            .replace('ws://', 'https://');
 
         return safeUrl + '/favicon.ico';
-      }
+    }
 
-      getSafeUrl(url: string): SafeUrl {
+    getSafeUrl(url: string): SafeUrl {
         return this.sanitizer.bypassSecurityTrustUrl(url);
-      }
-
+    }
 }
diff --git a/src/app/components/settings/security/security.component.html b/src/app/components/settings/security/security.component.html
index 5bddedf..76a128e 100644
--- a/src/app/components/settings/security/security.component.html
+++ b/src/app/components/settings/security/security.component.html
@@ -42,9 +42,7 @@
                         required
                     />
                 </mat-form-field>
-                <div class="text-hint mt-1 text-md">
-                    Minimum 3 characters.
-                </div>
+                <div class="text-hint mt-1 text-md">Minimum 3 characters.</div>
             </div>
         </div>
 
@@ -66,10 +64,12 @@
                     (click)="savePasswordToggle.toggle()"
                 >
                     <div class="font-medium leading-6">
-                        Save password for future decrypting sensitive information.
+                        Save password for future decrypting sensitive
+                        information.
                     </div>
                     <div class="text-secondary text-md">
-                        Enable this option to save your password locally for 60 minutes.
+                        Enable this option to save your password locally for 60
+                        minutes.
                     </div>
                 </div>
                 <mat-slide-toggle
diff --git a/src/app/components/settings/security/security.component.ts b/src/app/components/settings/security/security.component.ts
index ad46382..a41d62c 100644
--- a/src/app/components/settings/security/security.component.ts
+++ b/src/app/components/settings/security/security.component.ts
@@ -16,7 +16,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
- import { SignerService } from 'app/services/signer.service';
+import { SignerService } from 'app/services/signer.service';
 
 @Component({
     selector: 'settings-security',
@@ -42,7 +42,7 @@ export class SettingsSecurityComponent implements OnInit {
      */
     constructor(
         private _formBuilder: UntypedFormBuilder,
-         private _signerService: SignerService
+        private _signerService: SignerService
     ) {}
 
     /**
@@ -52,13 +52,7 @@ export class SettingsSecurityComponent implements OnInit {
         // Create the form
         this.securityForm = this._formBuilder.group({
             currentPassword: ['', Validators.required],
-            newPassword: [
-                '',
-                [
-                    Validators.required,
-                    Validators.minLength(3),
-                ],
-            ],
+            newPassword: ['', [Validators.required, Validators.minLength(3)]],
             twoStep: [true],
             askPasswordChange: [false],
             savePassword: [false], // Toggle for saving password
diff --git a/src/app/components/settings/settings.component.html b/src/app/components/settings/settings.component.html
index a686ba5..5780592 100644
--- a/src/app/components/settings/settings.component.html
+++ b/src/app/components/settings/settings.component.html
@@ -1,50 +1,71 @@
-<div class="flex w-full min-w-0 flex-col sm:absolute sm:inset-0 sm:overflow-hidden">
+<div
+    class="flex w-full min-w-0 flex-col sm:absolute sm:inset-0 sm:overflow-hidden"
+>
     <mat-drawer-container class="flex-auto sm:h-full">
         <!-- Drawer -->
-        <mat-drawer class="dark:bg-gray-900 sm:w-96" [autoFocus]="false" [mode]="drawerMode" [opened]="drawerOpened"
-            #drawer>
+        <mat-drawer
+            class="dark:bg-gray-900 sm:w-96"
+            [autoFocus]="false"
+            [mode]="drawerMode"
+            [opened]="drawerOpened"
+            #drawer
+        >
             <!-- Header -->
             <div class="m-8 mr-6 flex items-center justify-between sm:my-10">
                 <!-- Title -->
-                <div class="text-4xl font-extrabold leading-none tracking-tight">
+                <div
+                    class="text-4xl font-extrabold leading-none tracking-tight"
+                >
                     Settings
                 </div>
                 <!-- Close button -->
                 <div class="lg:hidden">
                     <button mat-icon-button (click)="drawer.close()">
-                        <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
+                        <mat-icon
+                            [svgIcon]="'heroicons_outline:x-mark'"
+                        ></mat-icon>
                     </button>
                 </div>
             </div>
             <!-- Panel links -->
             <div class="flex flex-col divide-y border-b border-t">
                 @for (panel of panels; track trackByFn($index, panel)) {
-                <div class="flex cursor-pointer px-8 py-5" [ngClass]="{
+                    <div
+                        class="flex cursor-pointer px-8 py-5"
+                        [ngClass]="{
                             'dark:hover:bg-hover hover:bg-gray-100':
                                 !selectedPanel || selectedPanel !== panel.id,
                             'bg-primary-50 dark:bg-hover':
                                 selectedPanel && selectedPanel === panel.id,
-                        }" (click)="goToPanel(panel.id)">
-                    <mat-icon [ngClass]="{
+                        }"
+                        (click)="goToPanel(panel.id)"
+                    >
+                        <mat-icon
+                            [ngClass]="{
                                 'text-hint':
                                     !selectedPanel ||
                                     selectedPanel !== panel.id,
                                 'text-primary dark:text-primary-500':
                                     selectedPanel && selectedPanel === panel.id,
-                            }" [svgIcon]="panel.icon"></mat-icon>
-                    <div class="ml-3">
-                        <div class="font-medium leading-6" [ngClass]="{
+                            }"
+                            [svgIcon]="panel.icon"
+                        ></mat-icon>
+                        <div class="ml-3">
+                            <div
+                                class="font-medium leading-6"
+                                [ngClass]="{
                                     'text-primary dark:text-primary-500':
                                         selectedPanel &&
                                         selectedPanel === panel.id,
-                                }">
-                            {{ panel.title }}
-                        </div>
-                        <div class="text-secondary mt-0.5">
-                            {{ panel.description }}
+                                }"
+                            >
+                                {{ panel.title }}
+                            </div>
+                            <div class="text-secondary mt-0.5">
+                                {{ panel.description }}
+                            </div>
                         </div>
                     </div>
-                </div>
                 }
             </div>
         </mat-drawer>
@@ -56,12 +77,20 @@
                 <!-- Panel header -->
                 <div class="flex items-center">
                     <!-- Drawer toggle -->
-                    <button class="-ml-2 lg:hidden" mat-icon-button (click)="drawer.toggle()">
-                        <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
+                    <button
+                        class="-ml-2 lg:hidden"
+                        mat-icon-button
+                        (click)="drawer.toggle()"
+                    >
+                        <mat-icon
+                            [svgIcon]="'heroicons_outline:bars-3'"
+                        ></mat-icon>
                     </button>
 
                     <!-- Panel title -->
-                    <div class="ml-2 text-3xl font-bold leading-none tracking-tight lg:ml-0">
+                    <div
+                        class="ml-2 text-3xl font-bold leading-none tracking-tight lg:ml-0"
+                    >
                         {{ getPanelInfo(selectedPanel).title }}
                     </div>
                 </div>
@@ -69,31 +98,30 @@
                 <!-- Load settings panel -->
                 <div class="mt-8">
                     @switch (selectedPanel) {
-                    <!-- Relay -->
-                    @case ('relay') {
-                    <settings-relay></settings-relay>
-                    }
-                    <!-- Network -->
-                    @case ('network') {
-                    <settings-network></settings-network>
-                    }
-                    <!-- Indexer -->
-                    @case ('indexer') {
-                    <settings-indexer></settings-indexer>
-                    }
-                    <!-- Profile -->
-                    @case ('profile') {
-                    <settings-profile></settings-profile>
-                    }
-                    <!-- Security -->
-                    @case ('security') {
-                    <settings-security></settings-security>
-                    }
-                    <!-- Notifications -->
-                    @case ('notifications') {
-                    <settings-notifications></settings-notifications>
-                    }
-
+                        <!-- Relay -->
+                        @case ('relay') {
+                            <settings-relay></settings-relay>
+                        }
+                        <!-- Network -->
+                        @case ('network') {
+                            <settings-network></settings-network>
+                        }
+                        <!-- Indexer -->
+                        @case ('indexer') {
+                            <settings-indexer></settings-indexer>
+                        }
+                        <!-- Profile -->
+                        @case ('profile') {
+                            <settings-profile></settings-profile>
+                        }
+                        <!-- Security -->
+                        @case ('security') {
+                            <settings-security></settings-security>
+                        }
+                        <!-- Notifications -->
+                        @case ('notifications') {
+                            <settings-notifications></settings-notifications>
+                        }
                     }
                 </div>
             </div>
diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts
index 60fda41..26bef2c 100644
--- a/src/app/components/settings/settings.component.ts
+++ b/src/app/components/settings/settings.component.ts
@@ -1,3 +1,4 @@
+import { AngorMediaWatcherService } from '@angor/services/media-watcher';
 import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -11,16 +12,15 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
-import { AngorMediaWatcherService } from '@angor/services/media-watcher';
-import { Subject, takeUntil } from 'rxjs';
-import { SettingsProfileComponent } from './profile/profile.component';
-import { SettingsNotificationsComponent } from './notifications/notifications.component';
-import { SettingsSecurityComponent } from './security/security.component';
-import { SettingsRelayComponent } from './relay/relay.component';
-import { SettingsNetworkComponent } from "./network/network.component";
-import { SettingsIndexerComponent } from "./indexer/indexer.component";
-import { SignerService } from 'app/services/signer.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { SignerService } from 'app/services/signer.service';
+import { Subject, takeUntil } from 'rxjs';
+import { SettingsIndexerComponent } from './indexer/indexer.component';
+import { SettingsNetworkComponent } from './network/network.component';
+import { SettingsNotificationsComponent } from './notifications/notifications.component';
+import { SettingsProfileComponent } from './profile/profile.component';
+import { SettingsRelayComponent } from './relay/relay.component';
+import { SettingsSecurityComponent } from './security/security.component';
 
 @Component({
     selector: 'settings',
@@ -38,7 +38,7 @@ import { ActivatedRoute, Router } from '@angular/router';
         SettingsNotificationsComponent,
         SettingsRelayComponent,
         SettingsNetworkComponent,
-        SettingsIndexerComponent
+        SettingsIndexerComponent,
     ],
 })
 export class SettingsComponent implements OnInit, OnDestroy {
@@ -50,48 +50,52 @@ export class SettingsComponent implements OnInit, OnDestroy {
             id: 'relay',
             icon: 'heroicons_outline:server',
             title: 'Relay',
-            description: 'Manage and configure your existing relays and update their access roles and permissions.',
+            description:
+                'Manage and configure your existing relays and update their access roles and permissions.',
         },
         {
             id: 'network',
             icon: 'heroicons_outline:globe-alt',
             title: 'Network',
-            description: 'Switch between mainnet and testnet for different Bitcoin network configurations.',
+            description:
+                'Switch between mainnet and testnet for different Bitcoin network configurations.',
         },
         {
             id: 'indexer',
             icon: 'heroicons_outline:chart-bar',
             title: 'Indexer',
-            description: 'Add, remove, and manage your indexers, including setting the primary indexer.',
+            description:
+                'Add, remove, and manage your indexers, including setting the primary indexer.',
         },
         {
             id: 'profile',
             icon: 'heroicons_outline:user',
             title: 'Profile',
-            description: 'Update your personal profile, manage your account details, and modify your private information.',
+            description:
+                'Update your personal profile, manage your account details, and modify your private information.',
         },
         {
             id: 'notifications',
             icon: 'heroicons_outline:bell',
             title: 'Notifications',
-            description: 'Control when and how you’ll be notified across various communication channels.',
+            description:
+                'Control when and how you’ll be notified across various communication channels.',
         },
         {
             id: 'security',
             icon: 'heroicons_outline:shield-check',
             title: 'Password Management',
-            description: 'Manage your password and decryption settings, including saving passwords for future decrypting sensitive information.',
-        }
+            description:
+                'Manage your password and decryption settings, including saving passwords for future decrypting sensitive information.',
+        },
     ];
 
-
     selectedPanel = 'relay';
-     selectPanel(panelId: string): void {
+    selectPanel(panelId: string): void {
         this.selectedPanel = panelId;
-         this.router.navigate(['settings', panelId], { replaceUrl: true });
+        this.router.navigate(['settings', panelId], { replaceUrl: true });
     }
 
-
     private _unsubscribeAll = new Subject<void>();
 
     constructor(
@@ -100,13 +104,12 @@ export class SettingsComponent implements OnInit, OnDestroy {
         private _signerService: SignerService,
         private _route: ActivatedRoute,
         private router: Router
-
-    ) { }
+    ) {}
 
     ngOnInit(): void {
         this._route.paramMap.subscribe((params) => {
             const id = params.get('id');
-            if (id && this.panels.some(panel => panel.id === id)) {
+            if (id && this.panels.some((panel) => panel.id === id)) {
                 this.selectedPanel = id;
             } else {
                 this.selectedPanel = 'relay';
@@ -117,18 +120,22 @@ export class SettingsComponent implements OnInit, OnDestroy {
             id: 'security',
             icon: 'heroicons_outline:shield-check',
             title: 'Password Management',
-            description: 'Manage your password and decryption settings, including saving passwords for future decrypting sensitive information.',
+            description:
+                'Manage your password and decryption settings, including saving passwords for future decrypting sensitive information.',
         };
 
-
         if (!this._signerService.isUsingSecretKey()) {
-            this.panels = this.panels.filter(panel => panel.id !== 'security');
-            console.log("Extension used, security panel removed");
+            this.panels = this.panels.filter(
+                (panel) => panel.id !== 'security'
+            );
+            console.log('Extension used, security panel removed');
         } else {
-            const panelExists = this.panels.some(panel => panel.id === 'security');
+            const panelExists = this.panels.some(
+                (panel) => panel.id === 'security'
+            );
             if (!panelExists) {
                 this.panels.push(securityPanel);
-                console.log("Extension not used, security panel added");
+                console.log('Extension not used, security panel added');
             }
         }
 
@@ -137,13 +144,14 @@ export class SettingsComponent implements OnInit, OnDestroy {
         this._angorMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(({ matchingAliases }) => {
-                this.drawerMode = matchingAliases.includes('lg') ? 'side' : 'over';
+                this.drawerMode = matchingAliases.includes('lg')
+                    ? 'side'
+                    : 'over';
                 this.drawerOpened = this.drawerMode === 'side';
                 this._changeDetectorRef.markForCheck();
             });
     }
 
-
     ngOnDestroy(): void {
         this._unsubscribeAll.next();
         this._unsubscribeAll.complete();
@@ -158,7 +166,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
     }
 
     getPanelInfo(id: string): any {
-        return this.panels.find(panel => panel.id === id);
+        return this.panels.find((panel) => panel.id === id);
     }
 
     trackByFn(index: number, item: any): any {
diff --git a/src/app/core/auth/auth.guard.ts b/src/app/core/auth/auth.guard.ts
index 1724f6d..5b93b69 100644
--- a/src/app/core/auth/auth.guard.ts
+++ b/src/app/core/auth/auth.guard.ts
@@ -2,15 +2,14 @@ import { inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { SignerService } from 'app/services/signer.service';
 
-
 export const authGuard = () => {
-  const signerService = inject(SignerService);
-  const router = inject(Router);
+    const signerService = inject(SignerService);
+    const router = inject(Router);
 
-  if (signerService.getPublicKey() !== "") {
-    return true;
-  }
+    if (signerService.getPublicKey() !== '') {
+        return true;
+    }
 
-  // Redirect to the login page
-  return router.parseUrl('/login');
+    // Redirect to the login page
+    return router.parseUrl('/login');
 };
diff --git a/src/app/core/navigation/navigation.service.ts b/src/app/core/navigation/navigation.service.ts
index 3e3673a..c669647 100644
--- a/src/app/core/navigation/navigation.service.ts
+++ b/src/app/core/navigation/navigation.service.ts
@@ -9,12 +9,10 @@ export class NavigationService {
     private _navigation: ReplaySubject<Navigation> =
         new ReplaySubject<Navigation>(1);
 
-
     get navigation$(): Observable<Navigation> {
         return this._navigation.asObservable();
     }
 
-
     get(): Observable<Navigation> {
         return this._httpClient.get<Navigation>('api/navigation').pipe(
             tap((navigation) => {
diff --git a/src/app/interface/project.interface.ts b/src/app/interface/project.interface.ts
index 8f2688a..b459930 100644
--- a/src/app/interface/project.interface.ts
+++ b/src/app/interface/project.interface.ts
@@ -4,5 +4,5 @@ export interface Project {
     displayName?: string;
     about?: string;
     picture?: string;
-    banner?:string
-  }
+    banner?: string;
+}
diff --git a/src/app/layout/common/notifications/notifications.component.ts b/src/app/layout/common/notifications/notifications.component.ts
index 24889f2..d6e2f5c 100644
--- a/src/app/layout/common/notifications/notifications.component.ts
+++ b/src/app/layout/common/notifications/notifications.component.ts
@@ -16,7 +16,10 @@ import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterLink } from '@angular/router';
- import { NostrNotification, NotificationService } from 'app/services/notification.service';
+import {
+    NostrNotification,
+    NotificationService,
+} from 'app/services/notification.service';
 import { SignerService } from 'app/services/signer.service';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -39,7 +42,8 @@ import { Subject, takeUntil } from 'rxjs';
 })
 export class NotificationsComponent implements OnInit, OnDestroy {
     @ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton;
-    @ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef<any>;
+    @ViewChild('notificationsPanel')
+    private _notificationsPanel: TemplateRef<any>;
 
     notifications: NostrNotification[] = [];
     unreadCount: number = 0;
@@ -51,25 +55,23 @@ export class NotificationsComponent implements OnInit, OnDestroy {
         private _changeDetectorRef: ChangeDetectorRef,
         private _overlay: Overlay,
         private _viewContainerRef: ViewContainerRef,
-        private _signerService: SignerService,
-
+        private _signerService: SignerService
     ) {}
 
     ngOnInit(): void {
+        const pubkey = this._signerService.getPublicKey();
 
-        const pubkey =  this._signerService.getPublicKey();
-
-         this._notificationService.subscribeToNotifications(pubkey).then(() => {
-
-            this._notificationService.getNotificationObservable()
+        this._notificationService.subscribeToNotifications(pubkey).then(() => {
+            this._notificationService
+                .getNotificationObservable()
                 .pipe(takeUntil(this._unsubscribeAll))
                 .subscribe((notifications: NostrNotification[]) => {
                     this.notifications = notifications;
                     this._changeDetectorRef.markForCheck();
                 });
 
-
-                this._notificationService.getNotificationCount()
+            this._notificationService
+                .getNotificationCount()
                 .pipe(takeUntil(this._unsubscribeAll))
                 .subscribe((count: number) => {
                     this.unreadCount = count;
@@ -79,7 +81,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-         this._unsubscribeAll.next(null);
+        this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 
@@ -122,12 +124,24 @@ export class NotificationsComponent implements OnInit, OnDestroy {
             scrollStrategy: this._overlay.scrollStrategies.block(),
             positionStrategy: this._overlay
                 .position()
-                .flexibleConnectedTo(this._notificationsOrigin._elementRef.nativeElement)
+                .flexibleConnectedTo(
+                    this._notificationsOrigin._elementRef.nativeElement
+                )
                 .withLockedPosition(true)
                 .withPush(true)
                 .withPositions([
-                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
                 ]),
         });
 
diff --git a/src/app/layout/common/quick-chat/quick-chat.component.html b/src/app/layout/common/quick-chat/quick-chat.component.html
index d4b3700..de34f45 100644
--- a/src/app/layout/common/quick-chat/quick-chat.component.html
+++ b/src/app/layout/common/quick-chat/quick-chat.component.html
@@ -73,7 +73,7 @@
         <div class="flex flex-auto overflow-hidden border-t">
             <!-- Chat list -->
             <div
-                class="h-full border-l w-16 flex-0 overflow-y-hidden overscroll-y-contain sm:overflow-hidden sm:overscroll-hidden"
+                class="sm:overscroll-hidden h-full w-16 flex-0 overflow-y-hidden overscroll-y-contain border-l sm:overflow-hidden"
                 angorScrollbar
                 [angorScrollbarOptions]="{ wheelPropagation: false }"
             >
diff --git a/src/app/layout/common/quick-chat/quick-chat.component.ts b/src/app/layout/common/quick-chat/quick-chat.component.ts
index fd71a80..5b0796a 100644
--- a/src/app/layout/common/quick-chat/quick-chat.component.ts
+++ b/src/app/layout/common/quick-chat/quick-chat.component.ts
@@ -1,3 +1,4 @@
+import { AngorScrollbarDirective } from '@angor/directives/scrollbar';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { DOCUMENT, DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
@@ -19,7 +20,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { AngorScrollbarDirective } from '@angor/directives/scrollbar';
 import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
 import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
 import { Subject, takeUntil } from 'rxjs';
diff --git a/src/app/layout/common/search/search.component.html b/src/app/layout/common/search/search.component.html
index 63f27ef..e57294d 100644
--- a/src/app/layout/common/search/search.component.html
+++ b/src/app/layout/common/search/search.component.html
@@ -2,38 +2,75 @@
     <button *ngIf="!opened" mat-icon-button (click)="open()">
         <mat-icon [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
     </button>
-    <div *ngIf="opened" class="bg-card absolute inset-0 z-99 flex shrink-0 items-center" @slideInTop @slideOutTop>
-        <mat-icon class="absolute ml-6 sm:ml-8" [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
-        <input class="h-full w-full px-16 sm:px-18" [formControl]="searchControl" [matAutocomplete]="matAutocomplete"
-            [placeholder]="'Search...'" (keydown)="onKeydown($event)" #barSearchInput />
-        <mat-autocomplete class="max-h-128 rounded-b border-t shadow-md sm:px-2" [autoSelectActiveOption]="true"
-            [disableRipple]="true" #matAutocomplete="matAutocomplete">
-            <mat-option *ngIf="resultSets && !resultSets.length"
-                class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md">
+    <div
+        *ngIf="opened"
+        class="bg-card absolute inset-0 z-99 flex shrink-0 items-center"
+        @slideInTop
+        @slideOutTop
+    >
+        <mat-icon
+            class="absolute ml-6 sm:ml-8"
+            [svgIcon]="'heroicons_outline:magnifying-glass'"
+        ></mat-icon>
+        <input
+            class="h-full w-full px-16 sm:px-18"
+            [formControl]="searchControl"
+            [matAutocomplete]="matAutocomplete"
+            [placeholder]="'Search...'"
+            (keydown)="onKeydown($event)"
+            #barSearchInput
+        />
+        <mat-autocomplete
+            class="max-h-128 rounded-b border-t shadow-md sm:px-2"
+            [autoSelectActiveOption]="true"
+            [disableRipple]="true"
+            #matAutocomplete="matAutocomplete"
+        >
+            <mat-option
+                *ngIf="resultSets && !resultSets.length"
+                class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
+            >
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
-                <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
+            <ng-container
+                *ngFor="let resultSet of resultSets; trackBy: trackByFn"
+            >
+                <ng-container
+                    *ngFor="let result of resultSet.results; trackBy: trackByFn"
+                >
                     <mat-option
                         class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
-                        [routerLink]="result.link" [value]="result.name">
+                        [routerLink]="result.link"
+                        [value]="result.name"
+                    >
                         <div class="flex items-center">
-                            <div class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-100 dark:bg-primary-800">
+                            <div
+                                class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-100 dark:bg-primary-800"
+                            >
                                 <img
                                     *ngIf="result.avatar"
                                     [src]="result.avatar"
                                     (error)="handleImageError($event)"
                                     class="h-full w-full object-cover"
-                                    alt="{{ result.name }}'s avatar" />
+                                    alt="{{ result.name }}'s avatar"
+                                />
                                 <ng-container *ngIf="!result.avatar">
-                                    <mat-icon class="m-0 text-primary icon-size-5 dark:text-primary-400" [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
+                                    <mat-icon
+                                        class="m-0 text-primary icon-size-5 dark:text-primary-400"
+                                        [svgIcon]="
+                                            'heroicons_outline:user-circle'
+                                        "
+                                    ></mat-icon>
                                 </ng-container>
                             </div>
                             <div class="ml-3 truncate">
                                 <span class="font-semibold">{{
                                     result.name
-                                    }}</span>
-                                <div *ngIf="result.about" class="text-sm text-gray-500">
+                                }}</span>
+                                <div
+                                    *ngIf="result.about"
+                                    class="text-sm text-gray-500"
+                                >
                                     {{ result.about }}
                                 </div>
                             </div>
@@ -42,7 +79,11 @@
                 </ng-container>
             </ng-container>
         </mat-autocomplete>
-        <button class="absolute right-5 top-1/2 -mt-5 h-10 w-10 shrink-0 sm:right-7" mat-icon-button (click)="close()">
+        <button
+            class="absolute right-5 top-1/2 -mt-5 h-10 w-10 shrink-0 sm:right-7"
+            mat-icon-button
+            (click)="close()"
+        >
             <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
         </button>
     </div>
diff --git a/src/app/layout/common/search/search.component.ts b/src/app/layout/common/search/search.component.ts
index fb22e58..6b330e5 100644
--- a/src/app/layout/common/search/search.component.ts
+++ b/src/app/layout/common/search/search.component.ts
@@ -1,3 +1,4 @@
+import { angorAnimations } from '@angor/animations/public-api';
 import { Overlay } from '@angular/cdk/overlay';
 import { CommonModule, NgClass, NgTemplateOutlet } from '@angular/common';
 import {
@@ -29,11 +30,10 @@ import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { DomSanitizer } from '@angular/platform-browser';
 import { RouterLink } from '@angular/router';
-import { angorAnimations } from '@angor/animations/public-api';
-import { Subject, debounceTime, filter, map, takeUntil } from 'rxjs';
 import { IndexedDBService } from 'app/services/indexed-db.service';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Subject, debounceTime, filter, map, takeUntil } from 'rxjs';
 
 @Component({
     selector: 'search',
@@ -54,7 +54,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
         MatFormFieldModule,
         MatInputModule,
         NgClass,
-        CommonModule
+        CommonModule,
     ],
     providers: [
         {
@@ -81,8 +81,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy {
     constructor(
         private _indexedDBService: IndexedDBService,
         private _sanitizer: DomSanitizer
-
-    ) { }
+    ) {}
 
     @ViewChild('barSearchInput')
     set barSearchInput(value: ElementRef) {
@@ -119,29 +118,37 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy {
                 filter((value) => value && value.length >= this.minLength)
             )
             .subscribe(async (value) => {
-                const results = await this._indexedDBService.searchUsersByMetadata(value);
+                const results =
+                    await this._indexedDBService.searchUsersByMetadata(value);
 
                 this.resultSets = results.map((result) => ({
                     label: 'Project',
                     results: [
                         {
-                            name: result.user.name || result.user.displayName || result.pubkey,
+                            name:
+                                result.user.name ||
+                                result.user.displayName ||
+                                result.pubkey,
                             pubkey: result.pubkey,
                             username: result.user.username || '',
                             website: result.user.website || '',
-                            about: result.user.about ? result.user.about.replace(/<\/?[^>]+(>|$)/g, '') : '',
+                            about: result.user.about
+                                ? result.user.about.replace(
+                                      /<\/?[^>]+(>|$)/g,
+                                      ''
+                                  )
+                                : '',
                             avatar: result.user.picture || null,
                             banner: result.user.banner || null,
-                            link: `/profile/${result.pubkey}`
-                        }
-                    ]
+                            link: `/profile/${result.pubkey}`,
+                        },
+                    ],
                 }));
 
                 this.search.next(this.resultSets);
             });
     }
 
-
     ngOnDestroy(): void {
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -181,5 +188,4 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy {
         target.onerror = null;
         target.src = 'images/avatars/avatar-placeholder.png';
     }
-
 }
diff --git a/src/app/layout/common/settings/settings.component.ts b/src/app/layout/common/settings/settings.component.ts
index 54da3ca..28ac1e3 100644
--- a/src/app/layout/common/settings/settings.component.ts
+++ b/src/app/layout/common/settings/settings.component.ts
@@ -1,9 +1,3 @@
-import { NgClass } from '@angular/common';
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router } from '@angular/router';
 import { AngorDrawerComponent } from '@angor/components/drawer';
 import {
     AngorConfig,
@@ -12,6 +6,12 @@ import {
     Theme,
     Themes,
 } from '@angor/services/config';
+import { NgClass } from '@angular/common';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
 
 import { Subject, takeUntil } from 'rxjs';
 
@@ -52,13 +52,11 @@ export class SettingsComponent implements OnInit, OnDestroy {
     themes: Themes;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
-
     constructor(
         private _router: Router,
         private _angorConfigService: AngorConfigService
     ) {}
 
-
     ngOnInit(): void {
         // Subscribe to config changes
         this._angorConfigService.config$
@@ -76,7 +74,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
         this._unsubscribeAll.complete();
     }
 
-
     setLayout(layout: string): void {
         // Clear the 'layout' query param to allow layout changes
         this._router
@@ -92,12 +89,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
             });
     }
 
-
     setScheme(scheme: Scheme): void {
         this._angorConfigService.config = { scheme };
     }
 
- 
     setTheme(theme: Theme): void {
         this._angorConfigService.config = { theme };
     }
diff --git a/src/app/layout/common/update/update.component.html b/src/app/layout/common/update/update.component.html
index 235f9ef..d645f29 100644
--- a/src/app/layout/common/update/update.component.html
+++ b/src/app/layout/common/update/update.component.html
@@ -1,7 +1,9 @@
 <!-- Update toggle -->
-<button *ngIf="updateService.isNewVersionAvailable$ | async"
-        mat-icon-button
-        [matTooltip]="tooltip || 'Update App'"
-        (click)="applyUpdate()">
+<button
+    *ngIf="updateService.isNewVersionAvailable$ | async"
+    mat-icon-button
+    [matTooltip]="tooltip || 'Update App'"
+    (click)="applyUpdate()"
+>
     <mat-icon [svgIcon]="'heroicons_outline:cloud-arrow-down'"></mat-icon>
 </button>
diff --git a/src/app/layout/common/update/update.component.ts b/src/app/layout/common/update/update.component.ts
index 0f76ca2..a8c5889 100644
--- a/src/app/layout/common/update/update.component.ts
+++ b/src/app/layout/common/update/update.component.ts
@@ -1,9 +1,13 @@
-import { CommonModule, DatePipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import {
+    CommonModule,
+    DatePipe,
+    NgClass,
+    NgTemplateOutlet,
+} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    inject,
     Input,
     ViewEncapsulation,
 } from '@angular/core';
@@ -28,7 +32,7 @@ import { NewVersionCheckerService } from 'app/services/update.service';
         NgTemplateOutlet,
         RouterLink,
         DatePipe,
-        CommonModule
+        CommonModule,
     ],
 })
 export class UpdateComponent {
diff --git a/src/app/layout/common/user/user.component.html b/src/app/layout/common/user/user.component.html
index 5f662f8..ed4286a 100644
--- a/src/app/layout/common/user/user.component.html
+++ b/src/app/layout/common/user/user.component.html
@@ -1,7 +1,12 @@
 <button mat-icon-button [matMenuTriggerFor]="userActions">
     <span class="relative">
         <ng-container *ngIf="metadata?.picture; else defaultAvatar">
-            <img class="h-7 w-7 rounded-full object-cover" [src]="getSafeUrl(metadata?.picture)" alt="User Avatar" />
+            <img
+                class="h-7 w-7 rounded-full object-cover"
+                [src]="getSafeUrl(metadata?.picture)"
+                alt=""
+                onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
+            />
         </ng-container>
         <ng-template #defaultAvatar>
             <mat-icon [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
@@ -13,7 +18,9 @@
     <button mat-menu-item>
         <span class="flex flex-col leading-none">
             <span>Logged in as</span>
-            <span class="mt-1.5 text-md font-medium">{{metadata?.display_name || metadata?.name || 'Unknown User'}}</span>
+            <span class="mt-1.5 text-md font-medium">{{
+                metadata?.display_name || metadata?.name || 'Unknown User'
+            }}</span>
         </span>
     </button>
     <mat-divider class="my-2"></mat-divider>
@@ -27,7 +34,9 @@
     </button>
     <mat-divider class="my-2"></mat-divider>
     <button mat-menu-item (click)="logout()">
-        <mat-icon [svgIcon]="'heroicons_outline:arrow-right-on-rectangle'"></mat-icon>
+        <mat-icon
+            [svgIcon]="'heroicons_outline:arrow-right-on-rectangle'"
+        ></mat-icon>
         <span>logout</span>
     </button>
 </mat-menu>
diff --git a/src/app/layout/common/user/user.component.ts b/src/app/layout/common/user/user.component.ts
index 85a87c5..9c0b205 100644
--- a/src/app/layout/common/user/user.component.ts
+++ b/src/app/layout/common/user/user.component.ts
@@ -1,3 +1,11 @@
+import {
+    AngorConfig,
+    AngorConfigService,
+    Scheme,
+    Theme,
+    Themes,
+} from '@angor/services/config';
+import { CommonModule, NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -6,18 +14,16 @@ import {
     OnInit,
     ViewEncapsulation,
 } from '@angular/core';
-import { AngorConfig, AngorConfigService, Scheme, Theme, Themes } from '@angor/services/config';
-import { Subject, takeUntil } from 'rxjs';
-import { Router } from '@angular/router';
-import { SignerService } from 'app/services/signer.service';
-import { NgClass, CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-import { MetadataService } from 'app/services/metadata.service';
-import { IndexedDBService } from 'app/services/indexed-db.service';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { IndexedDBService } from 'app/services/indexed-db.service';
+import { MetadataService } from 'app/services/metadata.service';
+import { SignerService } from 'app/services/signer.service';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector: 'user',
@@ -31,7 +37,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
         MatIconModule,
         NgClass,
         MatDividerModule,
-        CommonModule
+        CommonModule,
     ],
 })
 export class UserComponent implements OnInit, OnDestroy {
@@ -47,7 +53,6 @@ export class UserComponent implements OnInit, OnDestroy {
     theme: string;
     themes: Themes;
 
-
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _router: Router,
@@ -56,8 +61,7 @@ export class UserComponent implements OnInit, OnDestroy {
         private _signerService: SignerService,
         private _indexedDBService: IndexedDBService,
         private sanitizer: DomSanitizer
-
-    ) { }
+    ) {}
 
     ngOnInit(): void {
         this.loadUserProfile();
@@ -68,20 +72,22 @@ export class UserComponent implements OnInit, OnDestroy {
                 this.config = config;
                 this._changeDetectorRef.detectChanges();
             });
-            this.loadUserProfile();
+        this.loadUserProfile();
 
-            this._indexedDBService.getMetadataStream()
+        this._indexedDBService
+            .getMetadataStream()
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((updatedMetadata) => {
-                if (updatedMetadata && updatedMetadata.pubkey === this.user?.pubkey) {
+                if (
+                    updatedMetadata &&
+                    updatedMetadata.pubkey === this.user?.pubkey
+                ) {
                     this.metadata = updatedMetadata.metadata;
                     this._changeDetectorRef.detectChanges();
                 }
             });
     }
 
-
-
     ngOnDestroy(): void {
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -99,29 +105,32 @@ export class UserComponent implements OnInit, OnDestroy {
             return;
         }
 
-
         this.user = { pubkey: publicKey };
 
         try {
-
-            const metadata = await this._metadataService.fetchMetadataWithCache(publicKey);
+            const metadata =
+                await this._metadataService.fetchMetadataWithCache(publicKey);
             if (metadata) {
                 this.metadata = metadata;
                 this._changeDetectorRef.detectChanges();
             }
 
-
-            this._metadataService.getMetadataStream()
+            this._metadataService
+                .getMetadataStream()
                 .pipe(takeUntil(this._unsubscribeAll))
                 .subscribe((updatedMetadata) => {
-                    if (updatedMetadata && updatedMetadata.pubkey === publicKey) {
+                    if (
+                        updatedMetadata &&
+                        updatedMetadata.pubkey === publicKey
+                    ) {
                         this.metadata = updatedMetadata;
                         this._changeDetectorRef.detectChanges();
                     }
                 });
         } catch (error) {
             console.error('Failed to load profile data:', error);
-            this.errorMessage = 'Failed to load profile data. Please try again later.';
+            this.errorMessage =
+                'Failed to load profile data. Please try again later.';
             this._changeDetectorRef.detectChanges();
         } finally {
             this.isLoading = false;
@@ -154,5 +163,5 @@ export class UserComponent implements OnInit, OnDestroy {
 
     getSafeUrl(url: string): SafeUrl {
         return this.sanitizer.bypassSecurityTrustUrl(url);
-      }
+    }
 }
diff --git a/src/app/layout/layout.component.html b/src/app/layout/layout.component.html
index aaba3aa..bc2a5df 100644
--- a/src/app/layout/layout.component.html
+++ b/src/app/layout/layout.component.html
@@ -7,9 +7,7 @@
     <modern-layout></modern-layout>
 }
 
-
 <!-- Classic -->
 @if (layout === 'classic') {
     <classic-layout></classic-layout>
 }
-
diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts
index 256a496..4995341 100644
--- a/src/app/layout/layout.component.ts
+++ b/src/app/layout/layout.component.ts
@@ -1,3 +1,7 @@
+import { AngorConfig, AngorConfigService } from '@angor/services/config';
+import { AngorMediaWatcherService } from '@angor/services/media-watcher';
+import { AngorPlatformService } from '@angor/services/platform';
+import { ANGOR_VERSION } from '@angor/version';
 import { DOCUMENT } from '@angular/common';
 import {
     Component,
@@ -8,17 +12,12 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { AngorConfig, AngorConfigService } from '@angor/services/config';
-import { AngorMediaWatcherService } from '@angor/services/media-watcher';
-import { AngorPlatformService } from '@angor/services/platform';
-import { ANGOR_VERSION } from '@angor/version';
 import { Subject, combineLatest, filter, map, takeUntil } from 'rxjs';
 import { SettingsComponent } from './common/settings/settings.component';
 import { EmptyLayoutComponent } from './layouts/empty/empty.component';
 import { ModernLayoutComponent } from './layouts/horizontal/modern/modern.component';
 import { ClassicLayoutComponent } from './layouts/vertical/classic/classic.component';
 
-
 @Component({
     selector: 'layout',
     templateUrl: './layout.component.html',
@@ -39,7 +38,6 @@ export class LayoutComponent implements OnInit, OnDestroy {
     theme: string;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
-
     constructor(
         private _activatedRoute: ActivatedRoute,
         @Inject(DOCUMENT) private _document: any,
@@ -48,11 +46,9 @@ export class LayoutComponent implements OnInit, OnDestroy {
         private _angorConfigService: AngorConfigService,
         private _angorMediaWatcherService: AngorMediaWatcherService,
         private _angorPlatformService: AngorPlatformService
-    ) { }
-
+    ) {}
 
     ngOnInit(): void {
-
         combineLatest([
             this._angorConfigService.config$,
             this._angorMediaWatcherService.onMediaQueryChange$([
@@ -68,9 +64,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
                         theme: config.theme,
                     };
 
-
                     if (config.scheme === 'auto') {
-
                         options.scheme = mql.breakpoints[
                             '(prefers-color-scheme: dark)'
                         ]
@@ -82,70 +76,55 @@ export class LayoutComponent implements OnInit, OnDestroy {
                 })
             )
             .subscribe((options) => {
-
                 this.scheme = options.scheme;
                 this.theme = options.theme;
 
-
                 this._updateScheme();
                 this._updateTheme();
             });
 
-
         this._angorConfigService.config$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((config: AngorConfig) => {
-
                 this.config = config;
 
-
                 this._updateLayout();
             });
 
-
         this._router.events
             .pipe(
                 filter((event) => event instanceof NavigationEnd),
                 takeUntil(this._unsubscribeAll)
             )
             .subscribe(() => {
-
                 this._updateLayout();
             });
 
-
         this._renderer2.setAttribute(
             this._document.querySelector('[ng-version]'),
             'angor-version',
             ANGOR_VERSION
         );
 
-
         this._renderer2.addClass(
             this._document.body,
             this._angorPlatformService.osName
         );
     }
 
-
     ngOnDestroy(): void {
-
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 
     private _updateLayout(): void {
-
         let route = this._activatedRoute;
         while (route.firstChild) {
             route = route.firstChild;
         }
 
-
         this.layout = this.config.layout;
 
-
-
         const layoutFromQueryParam = route.snapshot.queryParamMap.get('layout');
         if (layoutFromQueryParam) {
             this.layout = layoutFromQueryParam;
@@ -156,29 +135,23 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
         const paths = route.pathFromRoot;
         paths.forEach((path) => {
-
             if (
                 path.routeConfig &&
                 path.routeConfig.data &&
                 path.routeConfig.data.layout
             ) {
-
                 this.layout = path.routeConfig.data.layout;
             }
         });
     }
 
     private _updateScheme(): void {
-
         this._document.body.classList.remove('light', 'dark');
 
-
         this._document.body.classList.add(this.scheme);
     }
 
-
     private _updateTheme(): void {
-
         this._document.body.classList.forEach((className: string) => {
             if (className.startsWith('theme-')) {
                 this._document.body.classList.remove(
@@ -188,7 +161,6 @@ export class LayoutComponent implements OnInit, OnDestroy {
             }
         });
 
-
         this._document.body.classList.add(this.theme);
     }
 }
diff --git a/src/app/layout/layouts/empty/empty.component.ts b/src/app/layout/layouts/empty/empty.component.ts
index 93d19dd..9a09998 100644
--- a/src/app/layout/layouts/empty/empty.component.ts
+++ b/src/app/layout/layouts/empty/empty.component.ts
@@ -1,6 +1,6 @@
+import { AngorLoadingBarComponent } from '@angor/components/loading-bar';
 import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { AngorLoadingBarComponent } from '@angor/components/loading-bar';
 import { Subject } from 'rxjs';
 
 @Component({
diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.ts b/src/app/layout/layouts/horizontal/modern/modern.component.ts
index 0d1770a..eaf834d 100644
--- a/src/app/layout/layouts/horizontal/modern/modern.component.ts
+++ b/src/app/layout/layouts/horizontal/modern/modern.component.ts
@@ -1,7 +1,3 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { AngorFullscreenComponent } from '@angor/components/fullscreen';
 import { AngorLoadingBarComponent } from '@angor/components/loading-bar';
 import {
@@ -10,6 +6,11 @@ import {
     AngorVerticalNavigationComponent,
 } from '@angor/components/navigation';
 import { AngorMediaWatcherService } from '@angor/services/media-watcher';
+import { ANGOR_VERSION } from '@angor/version';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
 import { NotificationsComponent } from 'app/layout/common/notifications/notifications.component';
@@ -17,8 +18,7 @@ import { QuickChatComponent } from 'app/layout/common/quick-chat/quick-chat.comp
 import { SearchComponent } from 'app/layout/common/search/search.component';
 import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
-import { ANGOR_VERSION } from '@angor/version';
-import { UpdateComponent } from "../../../common/update/update.component";
+import { UpdateComponent } from '../../../common/update/update.component';
 
 @Component({
     selector: 'modern-layout',
@@ -26,19 +26,19 @@ import { UpdateComponent } from "../../../common/update/update.component";
     encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [
-    AngorLoadingBarComponent,
-    AngorVerticalNavigationComponent,
-    AngorHorizontalNavigationComponent,
-    MatButtonModule,
-    MatIconModule,
-    AngorFullscreenComponent,
-    SearchComponent,
-    NotificationsComponent,
-    UserComponent,
-    RouterOutlet,
-    QuickChatComponent,
-    UpdateComponent
-],
+        AngorLoadingBarComponent,
+        AngorVerticalNavigationComponent,
+        AngorHorizontalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        AngorFullscreenComponent,
+        SearchComponent,
+        NotificationsComponent,
+        UserComponent,
+        RouterOutlet,
+        QuickChatComponent,
+        UpdateComponent,
+    ],
 })
 export class ModernLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
@@ -57,46 +57,36 @@ export class ModernLayoutComponent implements OnInit, OnDestroy {
         private _angorNavigationService: AngorNavigationService
     ) {}
 
-
     get currentYear(): number {
         return new Date().getFullYear();
     }
 
-
     ngOnInit(): void {
-
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
-
         this._angorMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(({ matchingAliases }) => {
-
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
     }
 
-
     ngOnDestroy(): void {
-
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 
-
     toggleNavigation(name: string): void {
-
         const navigation =
             this._angorNavigationService.getComponent<AngorVerticalNavigationComponent>(
                 name
             );
 
         if (navigation) {
-
             navigation.toggle();
         }
     }
diff --git a/src/app/layout/layouts/vertical/classic/classic.component.html b/src/app/layout/layouts/vertical/classic/classic.component.html
index a155a2e..0e1c32c 100644
--- a/src/app/layout/layouts/vertical/classic/classic.component.html
+++ b/src/app/layout/layouts/vertical/classic/classic.component.html
@@ -74,7 +74,7 @@
         class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
     >
         <span class="text-secondary font-medium"
-            >Angor Hub &copy; {{ currentYear }} - version {{version}}</span
+            >Angor Hub &copy; {{ currentYear }} - version {{ version }}</span
         >
     </div>
 </div>
diff --git a/src/app/layout/layouts/vertical/classic/classic.component.ts b/src/app/layout/layouts/vertical/classic/classic.component.ts
index 0cc0c85..49b5366 100644
--- a/src/app/layout/layouts/vertical/classic/classic.component.ts
+++ b/src/app/layout/layouts/vertical/classic/classic.component.ts
@@ -1,7 +1,3 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { AngorFullscreenComponent } from '@angor/components/fullscreen';
 import { AngorLoadingBarComponent } from '@angor/components/loading-bar';
 import {
@@ -9,6 +5,11 @@ import {
     AngorVerticalNavigationComponent,
 } from '@angor/components/navigation';
 import { AngorMediaWatcherService } from '@angor/services/media-watcher';
+import { ANGOR_VERSION } from '@angor/version';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
 import { NotificationsComponent } from 'app/layout/common/notifications/notifications.component';
@@ -16,8 +17,7 @@ import { QuickChatComponent } from 'app/layout/common/quick-chat/quick-chat.comp
 import { SearchComponent } from 'app/layout/common/search/search.component';
 import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
-import { ANGOR_VERSION } from '@angor/version';
-import { UpdateComponent } from "../../../common/update/update.component";
+import { UpdateComponent } from '../../../common/update/update.component';
 
 @Component({
     selector: 'classic-layout',
@@ -25,18 +25,18 @@ import { UpdateComponent } from "../../../common/update/update.component";
     encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [
-    AngorLoadingBarComponent,
-    AngorVerticalNavigationComponent,
-    MatButtonModule,
-    MatIconModule,
-    AngorFullscreenComponent,
-    SearchComponent,
-    NotificationsComponent,
-    UserComponent,
-    RouterOutlet,
-    QuickChatComponent,
-    UpdateComponent
-],
+        AngorLoadingBarComponent,
+        AngorVerticalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        AngorFullscreenComponent,
+        SearchComponent,
+        NotificationsComponent,
+        UserComponent,
+        RouterOutlet,
+        QuickChatComponent,
+        UpdateComponent,
+    ],
 })
 export class ClassicLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
@@ -52,45 +52,36 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy {
         private _angorNavigationService: AngorNavigationService
     ) {}
 
-
     get currentYear(): number {
         return new Date().getFullYear();
     }
 
-
     ngOnInit(): void {
-
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
-
         this._angorMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(({ matchingAliases }) => {
-
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
     }
 
     ngOnDestroy(): void {
-
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
     }
 
-
     toggleNavigation(name: string): void {
-
         const navigation =
             this._angorNavigationService.getComponent<AngorVerticalNavigationComponent>(
                 name
             );
 
         if (navigation) {
-
             navigation.toggle();
         }
     }
diff --git a/src/app/layout/navigation/api.ts b/src/app/layout/navigation/api.ts
index d7f7e38..a06e91d 100644
--- a/src/app/layout/navigation/api.ts
+++ b/src/app/layout/navigation/api.ts
@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
 import { AngorNavigationItem } from '@angor/components/navigation';
 import { AngorMockApiService } from '@angor/lib/mock-api';
+import { Injectable } from '@angular/core';
 import {
     compactNavigation,
     defaultNavigation,
diff --git a/src/app/layout/navigation/data.ts b/src/app/layout/navigation/data.ts
index 579ccd7..02ffd2a 100644
--- a/src/app/layout/navigation/data.ts
+++ b/src/app/layout/navigation/data.ts
@@ -3,152 +3,152 @@ import { AngorNavigationItem } from '@angor/components/navigation';
 
 export const defaultNavigation: AngorNavigationItem[] = [
     {
-        id   : 'home',
+        id: 'home',
         title: 'Home',
-        type : 'basic',
-        icon : 'heroicons_outline:home',
-        link : '/home'
+        type: 'basic',
+        icon: 'heroicons_outline:home',
+        link: '/home',
     },
     {
-        id   : 'explore',
+        id: 'explore',
         title: 'Explore',
-        type : 'basic',
-        icon : 'heroicons_outline:magnifying-glass',
-        link : '/explore'
+        type: 'basic',
+        icon: 'heroicons_outline:magnifying-glass',
+        link: '/explore',
     },
     {
-        id   : 'settings',
+        id: 'settings',
         title: 'Settings',
-        type : 'basic',
-        icon : 'heroicons_outline:cog-6-tooth',
-        link : '/settings'
+        type: 'basic',
+        icon: 'heroicons_outline:cog-6-tooth',
+        link: '/settings',
     },
     {
-        id   : 'profile',
+        id: 'profile',
         title: 'Profile',
-        type : 'basic',
-        icon : 'heroicons_outline:user',
-        link : '/profile'
+        type: 'basic',
+        icon: 'heroicons_outline:user',
+        link: '/profile',
     },
     {
-        id   : 'chat',
+        id: 'chat',
         title: 'Chat',
-        type : 'basic',
-        icon : 'heroicons_outline:chat-bubble-left-right',
-        link : '/chat'
-    }
+        type: 'basic',
+        icon: 'heroicons_outline:chat-bubble-left-right',
+        link: '/chat',
+    },
 ];
 
 export const compactNavigation: AngorNavigationItem[] = [
     {
-        id   : 'home',
+        id: 'home',
         title: 'Home',
-        type : 'basic',
-        icon : 'heroicons_outline:home',
-        link : '/home'
+        type: 'basic',
+        icon: 'heroicons_outline:home',
+        link: '/home',
     },
     {
-        id   : 'explore',
+        id: 'explore',
         title: 'Explore',
-        type : 'basic',
-        icon : 'heroicons_outline:magnifying-glass',
-        link : '/explore'
+        type: 'basic',
+        icon: 'heroicons_outline:magnifying-glass',
+        link: '/explore',
     },
     {
-        id   : 'settings',
+        id: 'settings',
         title: 'Settings',
-        type : 'basic',
-        icon : 'heroicons_outline:cog-6-tooth',
-        link : '/settings'
+        type: 'basic',
+        icon: 'heroicons_outline:cog-6-tooth',
+        link: '/settings',
     },
     {
-        id   : 'profile',
+        id: 'profile',
         title: 'Profile',
-        type : 'basic',
-        icon : 'heroicons_outline:user',
-        link : '/profile'
+        type: 'basic',
+        icon: 'heroicons_outline:user',
+        link: '/profile',
     },
     {
-        id   : 'chat',
+        id: 'chat',
         title: 'Chat',
-        type : 'basic',
-        icon : 'heroicons_outline:chat-bubble-left-right',
-        link : '/chat'
-    }
+        type: 'basic',
+        icon: 'heroicons_outline:chat-bubble-left-right',
+        link: '/chat',
+    },
 ];
 
 export const futuristicNavigation: AngorNavigationItem[] = [
     {
-        id   : 'home',
+        id: 'home',
         title: 'Home',
-        type : 'basic',
-        icon : 'heroicons_outline:home',
-        link : '/home'
+        type: 'basic',
+        icon: 'heroicons_outline:home',
+        link: '/home',
     },
     {
-        id   : 'explore',
+        id: 'explore',
         title: 'Explore',
-        type : 'basic',
-        icon : 'heroicons_outline:magnifying-glass',
-        link : '/explore'
+        type: 'basic',
+        icon: 'heroicons_outline:magnifying-glass',
+        link: '/explore',
     },
     {
-        id   : 'settings',
+        id: 'settings',
         title: 'Settings',
-        type : 'basic',
-        icon : 'heroicons_outline:cog-6-tooth',
-        link : '/settings'
+        type: 'basic',
+        icon: 'heroicons_outline:cog-6-tooth',
+        link: '/settings',
     },
     {
-        id   : 'profile',
+        id: 'profile',
         title: 'Profile',
-        type : 'basic',
-        icon : 'heroicons_outline:user',
-        link : '/profile'
+        type: 'basic',
+        icon: 'heroicons_outline:user',
+        link: '/profile',
     },
     {
-        id   : 'chat',
+        id: 'chat',
         title: 'Chat',
-        type : 'basic',
-        icon : 'heroicons_outline:chat-bubble-left-right',
-        link : '/chat'
-    }
+        type: 'basic',
+        icon: 'heroicons_outline:chat-bubble-left-right',
+        link: '/chat',
+    },
 ];
 
 export const horizontalNavigation: AngorNavigationItem[] = [
     {
-        id   : 'home',
+        id: 'home',
         title: 'Home',
-        type : 'basic',
-        icon : 'heroicons_outline:home',
-        link : '/home'
+        type: 'basic',
+        icon: 'heroicons_outline:home',
+        link: '/home',
     },
     {
-        id   : 'explore',
+        id: 'explore',
         title: 'Explore',
-        type : 'basic',
-        icon : 'heroicons_outline:magnifying-glass',
-        link : '/explore'
+        type: 'basic',
+        icon: 'heroicons_outline:magnifying-glass',
+        link: '/explore',
     },
     {
-        id   : 'settings',
+        id: 'settings',
         title: 'Settings',
-        type : 'basic',
-        icon : 'heroicons_outline:cog-6-tooth',
-        link : '/settings'
+        type: 'basic',
+        icon: 'heroicons_outline:cog-6-tooth',
+        link: '/settings',
     },
     {
-        id   : 'profile',
+        id: 'profile',
         title: 'Profile',
-        type : 'basic',
-        icon : 'heroicons_outline:user',
-        link : '/profile'
+        type: 'basic',
+        icon: 'heroicons_outline:user',
+        link: '/profile',
     },
     {
-        id   : 'chat',
+        id: 'chat',
         title: 'Chat',
-        type : 'basic',
-        icon : 'heroicons_outline:chat-bubble-left-right',
-        link : '/chat'
-    }
+        type: 'basic',
+        icon: 'heroicons_outline:chat-bubble-left-right',
+        link: '/chat',
+    },
 ];
diff --git a/src/app/layout/navigation/navigation.services.ts b/src/app/layout/navigation/navigation.services.ts
index b261e26..eb17eb4 100644
--- a/src/app/layout/navigation/navigation.services.ts
+++ b/src/app/layout/navigation/navigation.services.ts
@@ -1,5 +1,3 @@
-import { NavigationApi } from "./api";
+import { NavigationApi } from './api';
 
- export const navigationServices = [
-     NavigationApi,
-];
+export const navigationServices = [NavigationApi];
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 86c5747..0b32b63 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -1,23 +1,21 @@
 import { Injectable } from '@angular/core';
- import { Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { SignerService } from './signer.service';
 
-
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
 export class AuthService {
-
-  constructor(
-    private signerService: SignerService,
-    private router: Router
-  ) { }
+    constructor(
+        private signerService: SignerService,
+        private router: Router
+    ) {}
 
     isLoggedIn() {
         if (this.signerService.getPublicKey()) {
             return true;
         }
-        this.router.navigate(['/sign-in']);
+        this.router.navigate(['/login']);
         return false;
     }
 }
diff --git a/src/app/services/content-parser.service.ts b/src/app/services/content-parser.service.ts
deleted file mode 100644
index fe98144..0000000
--- a/src/app/services/content-parser.service.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SignerService } from './signer.service';
-
-
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ContentParserService {
-
-    constructor(
-        private signerService: SignerService
-    ) { }
-
-}
diff --git a/src/app/services/emoji.service.ts b/src/app/services/emoji.service.ts
deleted file mode 100644
index 131e029..0000000
--- a/src/app/services/emoji.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class EmojiService {
-  private readonly EMOJI_URL = 'data/emoji.json';
-
-  constructor(private http: HttpClient) {
-    console.log('EmojiService initialized');
-  }
-
-  getEmojis(): Observable<any> {
-    console.log('Fetching emojis from:', this.EMOJI_URL);
-    return this.http.get<any>(this.EMOJI_URL);
-  }
-}
diff --git a/src/app/services/event-emitter.service.ts b/src/app/services/event-emitter.service.ts
deleted file mode 100644
index 971862f..0000000
--- a/src/app/services/event-emitter.service.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class EventEmitterService {}
\ No newline at end of file
diff --git a/src/app/services/event.service.ts b/src/app/services/event.service.ts
index 9ffb57a..86a14b5 100644
--- a/src/app/services/event.service.ts
+++ b/src/app/services/event.service.ts
@@ -1,9 +1,652 @@
 import { Injectable } from '@angular/core';
+import { hexToBytes } from '@noble/hashes/utils';
+import { NewEvent } from 'app/types/NewEvent';
+import { Filter, finalizeEvent, NostrEvent } from 'nostr-tools';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
+import { MetadataService } from './metadata.service';
+import { RelayService } from './relay.service';
+import { SignerService } from './signer.service';
+
+interface Job {
+    eventId: string;
+    jobType: 'replies' | 'likes' | 'zaps' | 'reposts';
+}
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
-export class EventService {
+export class PaginatedEventService {
+    private eventsSubject = new BehaviorSubject<NewEvent[]>([]);
+    private isLoading = new BehaviorSubject<boolean>(false);
+    private lastLoadedEventTime: number | null = null;
+    private pageSize = 10;
+    private noMoreEvents = new BehaviorSubject<boolean>(false);
+    private seenEventIds = new Set<string>();
 
-  constructor() { }
+    private likesMap = new Map<string, string[]>();
+    private repliesMap = new Map<string, NewEvent[]>();
+    private zapsMap = new Map<string, string[]>();
+    private repostsMap = new Map<string, string[]>();
+    private hasLikedMap = new Map<string, boolean>();
+    private hasRepostedMap = new Map<string, boolean>();
+
+    private jobQueue: Job[] = [];
+    private isProcessingQueue = false;
+
+    myLikedNoteIds: string[] = [];
+
+    constructor(
+        private relayService: RelayService,
+        private signerService: SignerService,
+        private metadataService: MetadataService
+    ) {
+        this.clearEvents();
+       
+        this.getMyLikes().then(() => {}).catch(error => {
+            console.error('Failed to load user likes:', error);
+        });
+    }
+
+
+    async subscribeToEvents(pubkeys: string[]): Promise<void> {
+        await this.relayService.ensureConnectedRelays();
+        const connectedRelays = this.relayService.getConnectedRelays().slice(0, 3);
+
+        if (!connectedRelays || connectedRelays.length === 0) {
+            console.error('No connected relays available.');
+            return;
+        }
+
+        const filters: Filter[] = [
+            {
+                kinds: [1],
+                authors: pubkeys,
+                limit: this.pageSize,
+            },
+            {
+                '#p': pubkeys,
+                limit: 1,
+            },
+        ];
+
+        this.relayService.getPool().subscribeMany(connectedRelays, filters, {
+            onevent: (event: NostrEvent) => {
+                if (!this.isReply(event)) {
+                    this.handleNewOrUpdatedEvent(event);
+                }
+
+                const parentEventId = this.getParentEventId(event);
+                if (parentEventId) {
+                    this.enqueueJob(parentEventId, 'replies');
+                }
+
+                switch (event.kind) {
+                    case 7:
+                        this.enqueueJob(parentEventId, 'likes');
+                        break;
+                    case 9735:
+                        this.enqueueJob(parentEventId, 'zaps');
+                        break;
+                    case 6:
+                        this.enqueueJob(parentEventId, 'reposts');
+                        break;
+                    default:
+                }
+            },
+            oneose: () => {
+
+            },
+        });
+    }
+
+    private getParentEventId(event: NostrEvent): string | null {
+        const replyTag = event.tags.find((tag) => tag[0] === 'e');
+        return replyTag ? replyTag[1] : null;
+    }
+
+    private async handleNewOrUpdatedEvent(event: NostrEvent): Promise<void> {
+        switch (event.kind) {
+            case 1:
+                if (!this.seenEventIds.has(event.id)) {
+                    this.seenEventIds.add(event.id);
+                    const newEvent = await this.createNewEvent(event);
+                    const currentEvents = this.eventsSubject.getValue();
+                    this.eventsSubject.next(
+                        [newEvent, ...currentEvents].sort(
+                            (a, b) => b.createdAt - a.createdAt
+                        )
+                    );
+                    this.updateEventInSubject(event.id);
+                }
+                break;
+
+            case 7:
+                this.handleLikeEvent(event);
+                break;
+
+            case 9735:
+                this.handleZapEvent(event);
+                break;
+
+            case 6:
+                this.handleRepostEvent(event);
+                break;
+
+            case 4:
+                this.handleReplyEvent(event);
+                break;
+
+            default:
+        }
+    }
+
+    private handleLikeEvent(event: NostrEvent): void {
+        const eventId = event.tags.find((tag) => tag[0] === 'e')?.[1];
+        if (eventId) {
+            const currentEvents = this.eventsSubject.getValue();
+            const updatedEvents = currentEvents.map((e) => {
+                if (e.id === eventId) {
+                    e.likeCount += 1;
+                    e.likers = [...(e.likers || []), event.pubkey];
+                }
+                return e;
+            });
+            this.eventsSubject.next(updatedEvents);
+        }
+    }
+
+    private handleZapEvent(event: NostrEvent): void {
+        const eventId = event.tags.find((tag) => tag[0] === 'e')?.[1];
+        if (eventId) {
+            const currentEvents = this.eventsSubject.getValue();
+            const updatedEvents = currentEvents.map((e) => {
+                if (e.id === eventId) {
+                    e.zapCount += 1;
+                    e.zappers = [...(e.zappers || []), event.pubkey];
+                }
+                return e;
+            });
+            this.eventsSubject.next(updatedEvents);
+        }
+    }
+
+    private handleRepostEvent(event: NostrEvent): void {
+        const eventId = event.tags.find((tag) => tag[0] === 'e')?.[1];
+        if (eventId) {
+            const currentEvents = this.eventsSubject.getValue();
+            const updatedEvents = currentEvents.map((e) => {
+                if (e.id === eventId) {
+                    e.repostCount += 1;
+                    e.reposters = [...(e.reposters || []), event.pubkey];
+                }
+                return e;
+            });
+            this.eventsSubject.next(updatedEvents);
+        }
+    }
+
+    private async handleReplyEvent(event: NostrEvent): Promise<void> {
+        const eventId = event.tags.find((tag) => tag[0] === 'e')?.[1];
+        if (eventId) {
+            const replyEvent = await this.createNewEvent(event);
+            const currentEvents = this.eventsSubject.getValue();
+            const updatedEvents = currentEvents.map((e) => {
+                if (e.id === eventId) {
+                    e.replyCount += 1;
+                    e.replies = [...(e.replies || []), replyEvent];
+                }
+                return e;
+            });
+            this.eventsSubject.next(updatedEvents);
+        }
+    }
+
+    private isReply(event: NostrEvent): boolean {
+        const replyTags = event.tags.filter(
+            (tag) => tag[0] === 'e' || tag[0] === 'p'
+        );
+        return replyTags.length > 0;
+    }
+
+    private async getMyLikes(): Promise<string[]> {
+        const myLikesFilter: Filter = {
+            kinds: [7],
+            authors: [this.signerService.getPublicKey()]
+        };
+
+        try {
+            const likeEvents = await this.fetchFilteredEvents(myLikesFilter);
+            likeEvents.forEach((like) => {
+                const eventIdTag = like.tags.find(tag => tag[0] === 'e');
+                if (eventIdTag) {
+                    const eventId = eventIdTag[1];
+                    this.myLikedNoteIds.push(eventId);
+                }
+            });
+
+            return this.myLikedNoteIds;
+        } catch (error) {
+            console.error('Failed to get user likes:', error);
+            return [];
+        }
+    }
+
+    async loadMoreEvents(pubkeys: string[]): Promise<void> {
+        if (this.isLoading.value || this.noMoreEvents.value) return;
+
+        this.isLoading.next(true);
+
+        const filter: Filter = {
+            authors: pubkeys,
+            kinds: [1],
+            until: this.lastLoadedEventTime || Math.floor(Date.now() / 1000),
+            limit: this.pageSize,
+        };
+
+        try {
+            const events = await this.fetchFilteredEvents(filter);
+
+            if (events.length < this.pageSize) {
+                this.noMoreEvents.next(true);
+            }
+
+            if (events.length > 0) {
+                this.lastLoadedEventTime = events[events.length - 1].created_at;
+
+                const uniqueEvents = events.filter(
+                    (event) => !this.seenEventIds.has(event.id) && !this.isReply(event)
+                );
+                uniqueEvents.forEach((event) => this.seenEventIds.add(event.id));
+
+                const newEvents = await Promise.all(
+                    uniqueEvents.map((event) => this.createNewEvent(event))
+                );
+
+                this.eventsSubject.next(
+                    [...this.eventsSubject.getValue(), ...newEvents].sort(
+                        (a, b) => b.createdAt - a.createdAt
+                    )
+                );
+            } else {
+                this.noMoreEvents.next(true);
+            }
+        } catch (error) {
+            console.error('Error loading more events:', error);
+        } finally {
+            this.isLoading.next(false);
+        }
+    }
+
+    private async fetchFilteredEvents(filter: Filter): Promise<NostrEvent[]> {
+        await this.relayService.ensureConnectedRelays();
+        const connectedRelays = this.relayService.getConnectedRelays();
+
+        const eventMap = new Map<string, NostrEvent>();
+        const pool = this.relayService.getPool();
+
+        await Promise.all(
+            connectedRelays.map(async (relay) => {
+                const events = await pool.querySync([relay], filter);
+                events.forEach((event) => {
+                    if (!eventMap.has(event.id)) {
+                        eventMap.set(event.id, event);
+                    }
+                });
+            })
+        );
+
+        return Array.from(eventMap.values());
+    }
+
+    private async createNewEvent(event: NostrEvent): Promise<NewEvent> {
+        const newEvent = new NewEvent(
+            event.id,
+            event.kind,
+            event.pubkey,
+            event.content,
+            event.id,
+            event.created_at,
+            event.tags
+        );
+
+        this.enqueueJob(event.id, 'replies');
+        this.enqueueJob(event.id, 'likes');
+        this.enqueueJob(event.id, 'reposts');
+        this.enqueueJob(event.id, 'zaps');
+        await this.processJobQueue();
+
+        newEvent.likedByMe = this.myLikedNoteIds.includes(event.id);
+
+        const metadata = await this.metadataService.fetchMetadataWithCache(
+            event.pubkey
+        );
+        if (metadata) {
+            newEvent.username = metadata.name || newEvent.npub;
+            newEvent.picture = metadata.picture || '/images/avatars/avatar-placeholder.png';
+        }
+
+        return newEvent;
+    }
+
+    private enqueueJob(
+        eventId: string,
+        jobType: 'replies' | 'likes' | 'zaps' | 'reposts'
+    ): void {
+        if (
+            !this.jobQueue.some(
+                (job) => job.eventId === eventId && job.jobType === jobType
+            )
+        ) {
+            this.jobQueue.push({ eventId, jobType });
+            if (!this.isProcessingQueue) {
+                this.processJobQueue();
+            }
+        }
+    }
+
+    private async processJobQueue(): Promise<void> {
+        if (this.isProcessingQueue) return;
+        this.isProcessingQueue = true;
+
+        const activeJobs: Promise<void>[] = [];
+        while (this.jobQueue.length > 0 || activeJobs.length > 0) {
+            while (this.jobQueue.length > 0 && activeJobs.length < 10) {
+                const job = this.jobQueue.shift();
+                if (!job) break;
+
+                const jobPromise = this.processJob(job);
+                activeJobs.push(jobPromise);
+
+                jobPromise
+                    .then(() => {
+                        activeJobs.splice(activeJobs.indexOf(jobPromise), 1);
+                    })
+                    .catch((error) => {
+                        console.error('Error processing job:', error);
+                        activeJobs.splice(activeJobs.indexOf(jobPromise), 1);
+                    });
+            }
+            await Promise.race(activeJobs);
+        }
+
+        this.isProcessingQueue = false;
+    }
+
+    private async processJob(job: Job): Promise<void> {
+        switch (job.jobType) {
+            case 'replies':
+                const replies = await this.fetchReplies(job.eventId);
+                this.repliesMap.set(job.eventId, replies);
+                break;
+            case 'likes':
+                const likers = await this.getLikers(job.eventId);
+                this.likesMap.set(job.eventId, likers);
+                break;
+            case 'zaps':
+                const zappers = await this.getZappers(job.eventId);
+                this.zapsMap.set(job.eventId, zappers);
+                break;
+            case 'reposts':
+                const reposters = await this.getReposters(job.eventId);
+                this.repostsMap.set(job.eventId, reposters);
+                break;
+        }
+
+        this.updateEventInSubject(job.eventId);
+    }
+
+    private updateEventInSubject(eventId: string): void {
+        const currentEvents = this.eventsSubject.getValue();
+        const updatedEvents = currentEvents.map((event) => {
+            if (event.id === eventId) {
+                event.replyCount = this.getRepliesCount(eventId);
+                event.replies = this.repliesMap.get(eventId) || [];
+                event.likeCount = this.getLikesCount(eventId);
+                event.likers = this.likesMap.get(eventId) || [];
+                event.zapCount = this.getZapsCount(eventId);
+                event.zappers = this.zapsMap.get(eventId) || [];
+                event.repostCount = this.getRepostsCount(eventId);
+                event.reposters = this.repostsMap.get(eventId) || [];
+            }
+            return event;
+        });
+        this.eventsSubject.next(updatedEvents);
+    }
+
+    private async fetchReplies(eventId: string): Promise<NewEvent[]> {
+        const replyFilter: Filter = {
+            '#e': [eventId],
+            kinds: [1],
+        };
+
+        const events = await this.fetchFilteredEvents(replyFilter);
+
+        const uniqueEventMap = new Map<string, NostrEvent>();
+        events.forEach((event) => {
+            if (!uniqueEventMap.has(event.id)) {
+                uniqueEventMap.set(event.id, event);
+            }
+        });
+
+        return Promise.all(
+            Array.from(uniqueEventMap.values()).map((event) =>
+                this.createNewEvent(event)
+            )
+        );
+    }
+
+    private async getLikers(eventId: string): Promise<string[]> {
+        const likeFilter: Filter = {
+            '#e': [eventId],
+            kinds: [7],
+        };
+
+        const likeEvents = await this.fetchFilteredEvents(likeFilter);
+        return likeEvents.map((event) => event.pubkey);
+    }
+
+    private async getZappers(eventId: string): Promise<string[]> {
+        const zapFilter: Filter = {
+            '#e': [eventId],
+            kinds: [9735],
+        };
+
+        const zapEvents = await this.fetchFilteredEvents(zapFilter);
+        return zapEvents.map((event) => event.pubkey);
+    }
+
+    private async getReposters(eventId: string): Promise<string[]> {
+        const repostFilter: Filter = {
+            '#e': [eventId],
+            kinds: [6],
+        };
+
+        const repostEvents = await this.fetchFilteredEvents(repostFilter);
+        return repostEvents.map((event) => event.pubkey);
+    }
+
+    getRepliesCount(eventId: string): number {
+        return (this.repliesMap.get(eventId) || []).length;
+    }
+
+    getLikesCount(eventId: string): number {
+        return (this.likesMap.get(eventId) || []).length;
+    }
+
+    getZapsCount(eventId: string): number {
+        return (this.zapsMap.get(eventId) || []).length;
+    }
+
+    getRepostsCount(eventId: string): number {
+        return (this.repostsMap.get(eventId) || []).length;
+    }
+
+    hasUserLiked(eventId: string): boolean {
+        return this.hasLikedMap.get(eventId) || false;
+    }
+
+    hasUserReposted(eventId: string): boolean {
+        return this.hasRepostedMap.get(eventId) || false;
+    }
+
+    getEventStream(): Observable<NewEvent[]> {
+        return this.eventsSubject.asObservable().pipe(throttleTime(1000));
+    }
+
+    hasMoreEvents(): Observable<boolean> {
+        return this.noMoreEvents.asObservable();
+    }
+
+    async sendTextEvent(content: string): Promise<void> {
+        if (!content) return;
+
+        try {
+            const tags: string[][] = [];
+
+            const unsignedEvent = this.signerService.getUnsignedEvent(
+                1,
+                tags,
+                content
+            );
+            let signedEvent: NostrEvent;
+
+            if (this.signerService.isUsingSecretKey()) {
+                const privateKey =
+                    await this.signerService.getDecryptedSecretKey();
+                const privateKeyBytes = hexToBytes(privateKey);
+                signedEvent = finalizeEvent(unsignedEvent, privateKeyBytes);
+            } else {
+                signedEvent =
+                    await this.signerService.signEventWithExtension(
+                        unsignedEvent
+                    );
+            }
+
+            await this.relayService.publishEventToWriteRelays(signedEvent);
+        } catch (error) {
+            console.error('Failed to send text event:', error);
+        }
+    }
+
+    async sendLikeEvent(event: NewEvent): Promise<void> {
+        if (!event) return;
+
+        try {
+            const tags = [
+                ['e', event.id],
+                ['p', event.pubkey],
+            ];
+            const content = '+';
+
+            const unsignedEvent = this.signerService.getUnsignedEvent(
+                7,
+                tags,
+                content
+            );
+            let signedEvent: NostrEvent;
+
+            if (this.signerService.isUsingSecretKey()) {
+                const privateKey =
+                    await this.signerService.getDecryptedSecretKey();
+                const privateKeyBytes = hexToBytes(privateKey);
+                signedEvent = finalizeEvent(unsignedEvent, privateKeyBytes);
+            } else {
+                signedEvent =
+                    await this.signerService.signEventWithExtension(
+                        unsignedEvent
+                    );
+            }
+
+            await this.relayService.publishEventToWriteRelays(signedEvent);
+
+            this.likesMap.set(event.id, [
+                ...(this.likesMap.get(event.id) || []),
+                this.signerService.getPublicKey(),
+            ]);
+            this.hasLikedMap.set(event.id, true);
+        } catch (error) {
+            console.error('Failed to send like event:', error);
+        }
+    }
+
+    async sendZapEvent(event: NewEvent, zapAmount: number): Promise<void> {
+        if (!event || zapAmount <= 0) return;
+
+        try {
+            const tags = [
+                ['e', event.id],
+                ['p', event.pubkey],
+                ['amount', zapAmount.toString()],
+            ];
+            const content = `Zapped with ${zapAmount} sats`;
+
+            const unsignedEvent = this.signerService.getUnsignedEvent(
+                9735,
+                tags,
+                content
+            );
+            let signedEvent: NostrEvent;
+
+            if (this.signerService.isUsingSecretKey()) {
+                const privateKey =
+                    await this.signerService.getDecryptedSecretKey();
+                const privateKeyBytes = hexToBytes(privateKey);
+                signedEvent = finalizeEvent(unsignedEvent, privateKeyBytes);
+            } else {
+                signedEvent =
+                    await this.signerService.signEventWithExtension(
+                        unsignedEvent
+                    );
+            }
+
+            await this.relayService.publishEventToWriteRelays(signedEvent);
+        } catch (error) {
+            console.error('Failed to send zap event:', error);
+        }
+    }
+
+    async sendReplyEvent(
+        parentEvent: NewEvent,
+        replyContent: string
+    ): Promise<void> {
+        if (!parentEvent) return;
+
+        try {
+            const tags = [
+                ['e', parentEvent.id],
+                ['p', parentEvent.pubkey],
+            ];
+
+            const unsignedEvent = this.signerService.getUnsignedEvent(
+                1,
+                tags,
+                replyContent
+            );
+            let signedEvent: NostrEvent;
+
+            if (this.signerService.isUsingSecretKey()) {
+                const privateKey =
+                    await this.signerService.getDecryptedSecretKey();
+                const privateKeyBytes = hexToBytes(privateKey);
+                signedEvent = finalizeEvent(unsignedEvent, privateKeyBytes);
+            } else {
+                signedEvent =
+                    await this.signerService.signEventWithExtension(
+                        unsignedEvent
+                    );
+            }
+
+            await this.relayService.publishEventToWriteRelays(signedEvent);
+        } catch (error) {
+            console.error('Failed to send reply event:', error);
+        }
+    }
+
+    clearEvents(): void {
+        this.eventsSubject.next([]);
+        this.seenEventIds.clear();
+        this.lastLoadedEventTime = null;
+        this.noMoreEvents.next(false);
+    }
 }
diff --git a/src/app/services/gif.service.ts b/src/app/services/gif.service.ts
index 5b56303..0d9c62b 100644
--- a/src/app/services/gif.service.ts
+++ b/src/app/services/gif.service.ts
@@ -1,20 +1,19 @@
-import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
 import { TenorResponse } from 'app/types/gif';
+import { Observable } from 'rxjs';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
 export class GifService {
-
-    constructor(
-        private http: HttpClient
-    ) { }
+    constructor(private http: HttpClient) {}
 
     getTopGifs(search: string, apiKey: string): Observable<TenorResponse> {
-        const url = "https://g.tenor.com/v1/search";
-        const params = new HttpParams().append('key', apiKey).append('q', search);
+        const url = 'https://g.tenor.com/v1/search';
+        const params = new HttpParams()
+            .append('key', apiKey)
+            .append('q', search);
         return this.http.get<TenorResponse>(url, { params });
     }
 }
diff --git a/src/app/services/hash.service.ts b/src/app/services/hash.service.ts
index fbc47d0..8dc4fc4 100644
--- a/src/app/services/hash.service.ts
+++ b/src/app/services/hash.service.ts
@@ -1,42 +1,44 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { catchError, map } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
 import { Observable, throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
 
 @Injectable({
-  providedIn: 'root',
+    providedIn: 'root',
 })
 export class HashService {
-  private timestamp: string | null = null;
-  private readonly ngswFilePath = '/ngsw.json';
+    private timestamp: string | null = null;
+    private readonly ngswFilePath = '/ngsw.json';
 
-  constructor(private http: HttpClient) {}
+    constructor(private http: HttpClient) {}
 
-  async load(): Promise<void> {
-    try {
-      const response = await this.http.get<{ timestamp: string }>(this.ngswFilePath).toPromise();
-      if (response && response.timestamp) {
-        this.timestamp = response.timestamp;
-        console.log('Timestamp successfully loaded:', this.timestamp);
-      } else {
-        console.error('Invalid data format in ngsw.json');
-      }
-    } catch (error) {
-      console.error('Error loading ngsw.json:', error);
+    async load(): Promise<void> {
+        try {
+            const response = await this.http
+                .get<{ timestamp: string }>(this.ngswFilePath)
+                .toPromise();
+            if (response && response.timestamp) {
+                this.timestamp = response.timestamp;
+                console.log('Timestamp successfully loaded:', this.timestamp);
+            } else {
+                console.error('Invalid data format in ngsw.json');
+            }
+        } catch (error) {
+            console.error('Error loading ngsw.json:', error);
+        }
     }
-  }
 
-  getTimestamp(): string | null {
-    return this.timestamp;
-  }
+    getTimestamp(): string | null {
+        return this.timestamp;
+    }
 
-  loadHash(): Observable<string | null> {
-    return this.http.get<{ timestamp: string }>(this.ngswFilePath).pipe(
-      map((data) => data.timestamp || null),
-      catchError((error) => {
-        console.error('Error fetching ngsw.json hash:', error);
-        return throwError(() => new Error('Failed to load hash.'));
-      })
-    );
-  }
+    loadHash(): Observable<string | null> {
+        return this.http.get<{ timestamp: string }>(this.ngswFilePath).pipe(
+            map((data) => data.timestamp || null),
+            catchError((error) => {
+                console.error('Error fetching ngsw.json hash:', error);
+                return throwError(() => new Error('Failed to load hash.'));
+            })
+        );
+    }
 }
diff --git a/src/app/services/image-service.service.ts b/src/app/services/image-service.service.ts
index 79d7c8b..c8cc223 100644
--- a/src/app/services/image-service.service.ts
+++ b/src/app/services/image-service.service.ts
@@ -1,20 +1,19 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
 export class ImageServiceService {
-
-    constructor(private http: HttpClient) { }
+    constructor(private http: HttpClient) {}
 
     uploadImage(file: File | Blob): Observable<JSON> {
         // nostrimg
         // returns url of uploaded image
-        let url = "https://nostrimg.com/api/upload";
+        let url = 'https://nostrimg.com/api/upload';
         const fd = new FormData();
-        fd.append("image", file);
+        fd.append('image', file);
         // fd.append("submit", "Upload Image");
         return this.http.post<JSON>(url, fd);
     }
@@ -23,9 +22,9 @@ export class ImageServiceService {
     // not allowed accept from other clients not this
     uploadImageNostrBuild(file: File | Blob): Observable<string> {
         // returns url of uploaded image
-        let url = "https://nostrimg.com/api/upload";
+        let url = 'https://nostrimg.com/api/upload';
         const fd = new FormData();
-        fd.append("fileToUpload", file);
+        fd.append('fileToUpload', file);
         // fd.append("submit", "Upload Image");
         return this.http.post<string>(url, fd);
     }
diff --git a/src/app/services/indexed-db.service.ts b/src/app/services/indexed-db.service.ts
index a967553..3bf8e1e 100644
--- a/src/app/services/indexed-db.service.ts
+++ b/src/app/services/indexed-db.service.ts
@@ -2,242 +2,273 @@ import { Injectable } from '@angular/core';
 import localForage from 'localforage';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { Project, ProjectStats } from './projects.service';
-import { Chat } from 'app/components/chat/chat.types';
 
 @Injectable({
-  providedIn: 'root',
+    providedIn: 'root',
 })
 export class IndexedDBService {
-  private metadataSubject = new BehaviorSubject<any>(null);
-  private projectsSubject = new BehaviorSubject<Project[]>([]);
-  private projectStatsSubject = new BehaviorSubject<{ [key: string]: ProjectStats }>({});
+    private metadataSubject = new BehaviorSubject<any>(null);
+    private projectsSubject = new BehaviorSubject<Project[]>([]);
+    private projectStatsSubject = new BehaviorSubject<{
+        [key: string]: ProjectStats;
+    }>({});
 
-  private userStore: LocalForage;
-  private projectsStore: LocalForage;
-  private projectStatsStore: LocalForage;
+    private userStore: LocalForage;
+    private projectsStore: LocalForage;
+    private projectStatsStore: LocalForage;
 
+    constructor() {
+        this.userStore = localForage.createInstance({
+            driver: localForage.INDEXEDDB,
+            name: 'angor-hub',
+            version: 1.0,
+            storeName: 'users',
+            description: 'Store for user metadata',
+        });
 
-  constructor() {
+        this.projectsStore = localForage.createInstance({
+            driver: localForage.INDEXEDDB,
+            name: 'angor-hub',
+            version: 1.0,
+            storeName: 'projects',
+            description: 'Store for projects',
+        });
 
-    this.userStore = localForage.createInstance({
-      driver: localForage.INDEXEDDB,
-      name: 'angor-hub',
-      version: 1.0,
-      storeName: 'users',
-      description: 'Store for user metadata',
-    });
+        this.projectStatsStore = localForage.createInstance({
+            driver: localForage.INDEXEDDB,
+            name: 'angor-hub',
+            version: 1.0,
+            storeName: 'projectStats',
+            description: 'Store for project statistics',
+        });
 
-    this.projectsStore = localForage.createInstance({
-      driver: localForage.INDEXEDDB,
-      name: 'angor-hub',
-      version: 1.0,
-      storeName: 'projects',
-      description: 'Store for projects',
-    });
-
-    this.projectStatsStore = localForage.createInstance({
-      driver: localForage.INDEXEDDB,
-      name: 'angor-hub',
-      version: 1.0,
-      storeName: 'projectStats',
-      description: 'Store for project statistics',
-    });
-
-
-    this.loadAllProjectsFromDB();
-    this.loadAllProjectStatsFromDB();
-  }
-
-  getProjectsObservable(): Observable<Project[]> {
-    return this.projectsSubject.asObservable();
-  }
-
-  async saveProject(project: Project): Promise<void> {
-    try {
-      await this.projectsStore.setItem(project.projectIdentifier, project);
-      const updatedProjects = await this.getAllProjects();
-      this.projectsSubject.next(updatedProjects);
-    } catch (error) {
-      console.error(`Error saving project ${project.projectIdentifier} to IndexedDB:`, error);
+        this.loadAllProjectsFromDB();
+        this.loadAllProjectStatsFromDB();
     }
-  }
 
-  async getProject(projectIdentifier: string): Promise<Project | null> {
-    try {
-      const project = await this.projectsStore.getItem<Project>(projectIdentifier);
-      return project || null;
-    } catch (error) {
-      console.error(`Error getting project ${projectIdentifier} from IndexedDB:`, error);
-      return null;
+    getProjectsObservable(): Observable<Project[]> {
+        return this.projectsSubject.asObservable();
     }
-  }
 
-  async getAllProjects(): Promise<Project[]> {
-    try {
-      const projects: Project[] = [];
-      await this.projectsStore.iterate<Project, void>((value) => {
-        projects.push(value);
-      });
-      return projects;
-    } catch (error) {
-      console.error('Error getting all projects from IndexedDB:', error);
-      return [];
-    }
-  }
-
-  getProjectStatsObservable(): Observable<{ [key: string]: ProjectStats }> {
-    return this.projectStatsSubject.asObservable();
-  }
-
-  async saveProjectStats(projectIdentifier: string, stats: ProjectStats): Promise<void> {
-    try {
-      await this.projectStatsStore.setItem(projectIdentifier, stats);
-      const updatedStats = await this.getAllProjectStats();
-      this.projectStatsSubject.next(updatedStats);
-    } catch (error) {
-      console.error(`Error saving project stats for ${projectIdentifier} to IndexedDB:`, error);
-    }
-  }
-
-  async getProjectStats(projectIdentifier: string): Promise<ProjectStats | null> {
-    try {
-      const stats = await this.projectStatsStore.getItem<ProjectStats>(projectIdentifier);
-      return stats || null;
-    } catch (error) {
-      console.error(`Error getting project stats for ${projectIdentifier} from IndexedDB:`, error);
-      return null;
-    }
-  }
-
-  getMetadataStream(): Observable<any> {
-    return this.metadataSubject.asObservable();
-  }
-
-  async getUserMetadata(pubkey: string): Promise<any | null> {
-    try {
-      const metadata = await this.userStore.getItem(pubkey);
-      return metadata;
-    } catch (error) {
-      console.error('Error getting metadata from IndexedDB:', error);
-      return null;
-    }
-  }
-
-  async saveUserMetadata(pubKey: string, metadata: any): Promise<void> {
-    try {
-      metadata.pubKey=pubKey;
-      await this.userStore.setItem(pubKey, metadata);
-      this.metadataSubject.next({ pubKey, metadata });
-    } catch (error) {
-      console.error('Error saving metadata to IndexedDB:', error);
-    }
-  }
-
-  async removeUserMetadata(pubkey: string): Promise<void> {
-    try {
-      await this.userStore.removeItem(pubkey);
-      this.metadataSubject.next({ pubkey, metadata: null });
-    } catch (error) {
-      console.error('Error removing metadata from IndexedDB:', error);
-    }
-  }
-
-  private async loadAllProjectsFromDB(): Promise<void> {
-    try {
-      const projects = await this.getAllProjects();
-      this.projectsSubject.next(projects);
-    } catch (error) {
-      console.error('Error loading projects from IndexedDB:', error);
-    }
-  }
-
-  async getAllProjectStats(): Promise<{ [key: string]: ProjectStats }> {
-    try {
-      const statsMap: { [key: string]: ProjectStats } = {};
-      await this.projectStatsStore.iterate<ProjectStats, void>((value, key) => {
-        statsMap[key] = value;
-      });
-      return statsMap;
-    } catch (error) {
-      console.error('Error getting all project stats from IndexedDB:', error);
-      return {};
-    }
-  }
-
-  private async loadAllProjectStatsFromDB(): Promise<void> {
-    try {
-      const stats = await this.getAllProjectStats();
-      this.projectStatsSubject.next(stats);
-    } catch (error) {
-      console.error('Error loading project stats from IndexedDB:', error);
-    }
-  }
-
-  async getAllUsers(): Promise<any[]> {
-    try {
-      const users: any[] = [];
-      await this.userStore.iterate((value) => {
-        users.push(value);
-      });
-      return users;
-    } catch (error) {
-      console.error('Error getting all users from IndexedDB:', error);
-      return [];
-    }
-  }
-
-  async getSuggestionUsers(): Promise<{ pubkey: string, metadata: any }[]> {
-    try {
-      const users: { pubkey: string, metadata: any }[] = [];
-      await this.userStore.iterate<any, void>((metadata, pubkey) => {
-        users.push({ pubkey, metadata });
-      });
-
-      const count = Math.min(users.length, 16);
-
-      const randomUsers = this.getRandomItems(users, count);
-      return randomUsers;
-    } catch (error) {
-      console.error('Error getting suggestion users from IndexedDB:', error);
-      return [];
-    }
-  }
-
-   private getRandomItems<T>(array: T[], count: number): T[] {
-    const shuffled = array.sort(() => 0.5 - Math.random());
-
-    return shuffled.slice(0, count);
-
-}
-
-
-  async clearAllMetadata(): Promise<void> {
-    try {
-      await this.userStore.clear();
-      this.metadataSubject.next(null);
-    } catch (error) {
-      console.error('Error clearing all metadata:', error);
-    }
-  }
-
-
-   async searchUsersByMetadata(query: string): Promise<{ pubkey: string, user: any }[]> {
-    try {
-      const matchingUsers: { pubkey: string, user: any }[] = [];
-      const searchQuery = query.toLowerCase();
-
-      await this.userStore.iterate<any, void>((user, pubkey) => {
-        const userString = JSON.stringify(user).toLowerCase();
-        if (userString.includes(searchQuery)) {
-          matchingUsers.push({ pubkey, user });
+    async saveProject(project: Project): Promise<void> {
+        try {
+            await this.projectsStore.setItem(
+                project.projectIdentifier,
+                project
+            );
+            const updatedProjects = await this.getAllProjects();
+            this.projectsSubject.next(updatedProjects);
+        } catch (error) {
+            console.error(
+                `Error saving project ${project.projectIdentifier} to IndexedDB:`,
+                error
+            );
         }
-      });
-
-      return matchingUsers;
-    } catch (error) {
-      console.error('Error searching users by metadata from IndexedDB:', error);
-      return [];
     }
-  }
 
- }
+    async getProject(projectIdentifier: string): Promise<Project | null> {
+        try {
+            const project =
+                await this.projectsStore.getItem<Project>(projectIdentifier);
+            return project || null;
+        } catch (error) {
+            console.error(
+                `Error getting project ${projectIdentifier} from IndexedDB:`,
+                error
+            );
+            return null;
+        }
+    }
+
+    async getAllProjects(): Promise<Project[]> {
+        try {
+            const projects: Project[] = [];
+            await this.projectsStore.iterate<Project, void>((value) => {
+                projects.push(value);
+            });
+            return projects;
+        } catch (error) {
+            console.error('Error getting all projects from IndexedDB:', error);
+            return [];
+        }
+    }
+
+    getProjectStatsObservable(): Observable<{ [key: string]: ProjectStats }> {
+        return this.projectStatsSubject.asObservable();
+    }
+
+    async saveProjectStats(
+        projectIdentifier: string,
+        stats: ProjectStats
+    ): Promise<void> {
+        try {
+            await this.projectStatsStore.setItem(projectIdentifier, stats);
+            const updatedStats = await this.getAllProjectStats();
+            this.projectStatsSubject.next(updatedStats);
+        } catch (error) {
+            console.error(
+                `Error saving project stats for ${projectIdentifier} to IndexedDB:`,
+                error
+            );
+        }
+    }
+
+    async getProjectStats(
+        projectIdentifier: string
+    ): Promise<ProjectStats | null> {
+        try {
+            const stats =
+                await this.projectStatsStore.getItem<ProjectStats>(
+                    projectIdentifier
+                );
+            return stats || null;
+        } catch (error) {
+            console.error(
+                `Error getting project stats for ${projectIdentifier} from IndexedDB:`,
+                error
+            );
+            return null;
+        }
+    }
+
+    getMetadataStream(): Observable<any> {
+        return this.metadataSubject.asObservable();
+    }
+
+    async getUserMetadata(pubkey: string): Promise<any | null> {
+        try {
+            const metadata = await this.userStore.getItem(pubkey);
+            return metadata;
+        } catch (error) {
+            console.error('Error getting metadata from IndexedDB:', error);
+            return null;
+        }
+    }
+
+    async saveUserMetadata(pubKey: string, metadata: any): Promise<void> {
+        try {
+            metadata.pubKey = pubKey;
+            await this.userStore.setItem(pubKey, metadata);
+            this.metadataSubject.next({ pubKey, metadata });
+        } catch (error) {
+            console.error('Error saving metadata to IndexedDB:', error);
+        }
+    }
+
+    async removeUserMetadata(pubkey: string): Promise<void> {
+        try {
+            await this.userStore.removeItem(pubkey);
+            this.metadataSubject.next({ pubkey, metadata: null });
+        } catch (error) {
+            console.error('Error removing metadata from IndexedDB:', error);
+        }
+    }
+
+    private async loadAllProjectsFromDB(): Promise<void> {
+        try {
+            const projects = await this.getAllProjects();
+            this.projectsSubject.next(projects);
+        } catch (error) {
+            console.error('Error loading projects from IndexedDB:', error);
+        }
+    }
+
+    async getAllProjectStats(): Promise<{ [key: string]: ProjectStats }> {
+        try {
+            const statsMap: { [key: string]: ProjectStats } = {};
+            await this.projectStatsStore.iterate<ProjectStats, void>(
+                (value, key) => {
+                    statsMap[key] = value;
+                }
+            );
+            return statsMap;
+        } catch (error) {
+            console.error(
+                'Error getting all project stats from IndexedDB:',
+                error
+            );
+            return {};
+        }
+    }
+
+    private async loadAllProjectStatsFromDB(): Promise<void> {
+        try {
+            const stats = await this.getAllProjectStats();
+            this.projectStatsSubject.next(stats);
+        } catch (error) {
+            console.error('Error loading project stats from IndexedDB:', error);
+        }
+    }
+
+    async getAllUsers(): Promise<any[]> {
+        try {
+            const users: any[] = [];
+            await this.userStore.iterate((value) => {
+                users.push(value);
+            });
+            return users;
+        } catch (error) {
+            console.error('Error getting all users from IndexedDB:', error);
+            return [];
+        }
+    }
+
+    async getSuggestionUsers(): Promise<{ pubkey: string; metadata: any }[]> {
+        try {
+            const users: { pubkey: string; metadata: any }[] = [];
+            await this.userStore.iterate<any, void>((metadata, pubkey) => {
+                users.push({ pubkey, metadata });
+            });
+
+            const count = Math.min(users.length, 16);
+
+            const randomUsers = this.getRandomItems(users, count);
+            return randomUsers;
+        } catch (error) {
+            console.error(
+                'Error getting suggestion users from IndexedDB:',
+                error
+            );
+            return [];
+        }
+    }
+
+    private getRandomItems<T>(array: T[], count: number): T[] {
+        const shuffled = array.sort(() => 0.5 - Math.random());
+
+        return shuffled.slice(0, count);
+    }
+
+    async clearAllMetadata(): Promise<void> {
+        try {
+            await this.userStore.clear();
+            this.metadataSubject.next(null);
+        } catch (error) {
+            console.error('Error clearing all metadata:', error);
+        }
+    }
+
+    async searchUsersByMetadata(
+        query: string
+    ): Promise<{ pubkey: string; user: any }[]> {
+        try {
+            const matchingUsers: { pubkey: string; user: any }[] = [];
+            const searchQuery = query.toLowerCase();
+
+            await this.userStore.iterate<any, void>((user, pubkey) => {
+                const userString = JSON.stringify(user).toLowerCase();
+                if (userString.includes(searchQuery)) {
+                    matchingUsers.push({ pubkey, user });
+                }
+            });
+
+            return matchingUsers;
+        } catch (error) {
+            console.error(
+                'Error searching users by metadata from IndexedDB:',
+                error
+            );
+            return [];
+        }
+    }
+}
diff --git a/src/app/services/indexer.service.ts b/src/app/services/indexer.service.ts
index ba8f364..6277acc 100644
--- a/src/app/services/indexer.service.ts
+++ b/src/app/services/indexer.service.ts
@@ -1,89 +1,116 @@
 import { Injectable } from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
 export class IndexerService {
+    private mainnetLocalStorageKey = 'mainnetIndexers';
+    private testnetLocalStorageKey = 'testnetIndexers';
+    private mainnetPrimaryIndexerKey = 'mainnetPrimaryIndexer';
+    private testnetPrimaryIndexerKey = 'testnetPrimaryIndexer';
 
-  private mainnetLocalStorageKey = 'mainnetIndexers';
-  private testnetLocalStorageKey = 'testnetIndexers';
-  private mainnetPrimaryIndexerKey = 'mainnetPrimaryIndexer';
-  private testnetPrimaryIndexerKey = 'testnetPrimaryIndexer';
+    private networkStorageKey = 'selectedNetwork';
 
-  private networkStorageKey = 'selectedNetwork';
+    private defaultMainnetIndexer = 'https://btc.indexer.angor.io/';
+    private defaultTestnetIndexer = 'https://tbtc.indexer.angor.io/';
 
-  private defaultMainnetIndexer = 'https://btc.indexer.angor.io/';
-  private defaultTestnetIndexer = 'https://tbtc.indexer.angor.io/';
-
-  constructor() {
-    this.initializeDefaultIndexers();
-  }
-
-  private initializeDefaultIndexers(): void {
-    if (this.getIndexers('mainnet').length === 0) {
-      this.addIndexer(this.defaultMainnetIndexer, 'mainnet');
-      this.setPrimaryIndexer(this.defaultMainnetIndexer, 'mainnet');
+    constructor() {
+        this.initializeDefaultIndexers();
     }
-    if (this.getIndexers('testnet').length === 0) {
-      this.addIndexer(this.defaultTestnetIndexer, 'testnet');
-      this.setPrimaryIndexer(this.defaultTestnetIndexer, 'testnet');
+
+    private initializeDefaultIndexers(): void {
+        if (this.getIndexers('mainnet').length === 0) {
+            this.addIndexer(this.defaultMainnetIndexer, 'mainnet');
+            this.setPrimaryIndexer(this.defaultMainnetIndexer, 'mainnet');
+        }
+        if (this.getIndexers('testnet').length === 0) {
+            this.addIndexer(this.defaultTestnetIndexer, 'testnet');
+            this.setPrimaryIndexer(this.defaultTestnetIndexer, 'testnet');
+        }
     }
-  }
 
-  addIndexer(indexer: string, network: 'mainnet' | 'testnet'): void {
-    let indexers = this.getIndexers(network);
-    if (!indexers.includes(indexer)) {
-      indexers.push(indexer);
-      this.saveIndexers(indexers, network);
+    addIndexer(indexer: string, network: 'mainnet' | 'testnet'): void {
+        let indexers = this.getIndexers(network);
+        if (!indexers.includes(indexer)) {
+            indexers.push(indexer);
+            this.saveIndexers(indexers, network);
+        }
     }
-  }
 
-  getIndexers(network: 'mainnet' | 'testnet'): string[] {
-    const storageKey = network === 'mainnet' ? this.mainnetLocalStorageKey : this.testnetLocalStorageKey;
-    return JSON.parse(localStorage.getItem(storageKey) || '[]');
-  }
-
-  private saveIndexers(indexers: string[], network: 'mainnet' | 'testnet'): void {
-    const storageKey = network === 'mainnet' ? this.mainnetLocalStorageKey : this.testnetLocalStorageKey;
-    localStorage.setItem(storageKey, JSON.stringify(indexers));
-  }
-
-  setPrimaryIndexer(indexer: string, network: 'mainnet' | 'testnet'): void {
-    if (this.getIndexers(network).includes(indexer)) {
-      const primaryKey = network === 'mainnet' ? this.mainnetPrimaryIndexerKey : this.testnetPrimaryIndexerKey;
-      localStorage.setItem(primaryKey, indexer);
+    getIndexers(network: 'mainnet' | 'testnet'): string[] {
+        const storageKey =
+            network === 'mainnet'
+                ? this.mainnetLocalStorageKey
+                : this.testnetLocalStorageKey;
+        return JSON.parse(localStorage.getItem(storageKey) || '[]');
     }
-  }
 
-  getPrimaryIndexer(network: 'mainnet' | 'testnet'): string | null {
-    const primaryKey = network === 'mainnet' ? this.mainnetPrimaryIndexerKey : this.testnetPrimaryIndexerKey;
-    return localStorage.getItem(primaryKey);
-  }
+    private saveIndexers(
+        indexers: string[],
+        network: 'mainnet' | 'testnet'
+    ): void {
+        const storageKey =
+            network === 'mainnet'
+                ? this.mainnetLocalStorageKey
+                : this.testnetLocalStorageKey;
+        localStorage.setItem(storageKey, JSON.stringify(indexers));
+    }
 
-  removeIndexer(indexer: string, network: 'mainnet' | 'testnet'): void {
-    let indexers = this.getIndexers(network);
-    const index = indexers.indexOf(indexer);
-    if (index !== -1) {
-      indexers.splice(index, 1);
-      this.saveIndexers(indexers, network);
-      if (indexer === this.getPrimaryIndexer(network)) {
-        const primaryKey = network === 'mainnet' ? this.mainnetPrimaryIndexerKey : this.testnetPrimaryIndexerKey;
+    setPrimaryIndexer(indexer: string, network: 'mainnet' | 'testnet'): void {
+        if (this.getIndexers(network).includes(indexer)) {
+            const primaryKey =
+                network === 'mainnet'
+                    ? this.mainnetPrimaryIndexerKey
+                    : this.testnetPrimaryIndexerKey;
+            localStorage.setItem(primaryKey, indexer);
+        }
+    }
+
+    getPrimaryIndexer(network: 'mainnet' | 'testnet'): string | null {
+        const primaryKey =
+            network === 'mainnet'
+                ? this.mainnetPrimaryIndexerKey
+                : this.testnetPrimaryIndexerKey;
+        return localStorage.getItem(primaryKey);
+    }
+
+    removeIndexer(indexer: string, network: 'mainnet' | 'testnet'): void {
+        let indexers = this.getIndexers(network);
+        const index = indexers.indexOf(indexer);
+        if (index !== -1) {
+            indexers.splice(index, 1);
+            this.saveIndexers(indexers, network);
+            if (indexer === this.getPrimaryIndexer(network)) {
+                const primaryKey =
+                    network === 'mainnet'
+                        ? this.mainnetPrimaryIndexerKey
+                        : this.testnetPrimaryIndexerKey;
+                localStorage.removeItem(primaryKey);
+            }
+        }
+    }
+
+    clearAllIndexers(network: 'mainnet' | 'testnet'): void {
+        const storageKey =
+            network === 'mainnet'
+                ? this.mainnetLocalStorageKey
+                : this.testnetLocalStorageKey;
+        const primaryKey =
+            network === 'mainnet'
+                ? this.mainnetPrimaryIndexerKey
+                : this.testnetPrimaryIndexerKey;
+        localStorage.removeItem(storageKey);
         localStorage.removeItem(primaryKey);
-      }
     }
-  }
+    setNetwork(network: 'mainnet' | 'testnet'): void {
+        localStorage.setItem(this.networkStorageKey, network);
+    }
 
-  clearAllIndexers(network: 'mainnet' | 'testnet'): void {
-    const storageKey = network === 'mainnet' ? this.mainnetLocalStorageKey : this.testnetLocalStorageKey;
-    const primaryKey = network === 'mainnet' ? this.mainnetPrimaryIndexerKey : this.testnetPrimaryIndexerKey;
-    localStorage.removeItem(storageKey);
-    localStorage.removeItem(primaryKey);
-  }
-  setNetwork(network: 'mainnet' | 'testnet'): void {
-    localStorage.setItem(this.networkStorageKey, network);
-  }
-
-  getNetwork(): 'mainnet' | 'testnet' {
-    return (localStorage.getItem(this.networkStorageKey) as 'mainnet' | 'testnet') || 'testnet';
-  }
+    getNetwork(): 'mainnet' | 'testnet' {
+        return (
+            (localStorage.getItem(this.networkStorageKey) as
+                | 'mainnet'
+                | 'testnet') || 'testnet'
+        );
+    }
 }
diff --git a/src/app/services/lightning.service.ts b/src/app/services/lightning.service.ts
index 9b6aa34..bf0d8b1 100644
--- a/src/app/services/lightning.service.ts
+++ b/src/app/services/lightning.service.ts
@@ -1,102 +1,105 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { LightningInvoice, LightningResponse } from 'app/types/post';
+import { Event } from 'nostr-tools';
 import { Observable, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { Event } from 'nostr-tools';
-import { LightningInvoice, LightningResponse } from 'app/types/post';
 
 @Injectable({
-  providedIn: 'root',
+    providedIn: 'root',
 })
 export class LightningService {
-  constructor(private http: HttpClient) {}
+    constructor(private http: HttpClient) {}
 
-  getLightning(url: string): Observable<LightningResponse> {
-    return this.http.get<LightningResponse>(url).pipe(
-      catchError((error) => {
-        console.error('Failed to fetch Lightning response:', error);
-        return of({ status: 'Failed' } as LightningResponse);
-      })
-    );
-  }
-
-  getLightningInvoice(url: string, amount: string): Observable<LightningInvoice> {
-    const requestUrl = `${url}?amount=${amount}`;
-    return this.http.get<LightningInvoice>(requestUrl).pipe(
-      catchError((error) => {
-        console.error('Failed to fetch Lightning invoice:', error);
-        return of({ pr: '', status: 'Failed' } as LightningInvoice);
-      })
-    );
-  }
-
-  getLightningAddress(url: string): string {
-    try {
-      const [username, domain] = url.split('@');
-      return `https://${domain}/.well-known/lnurlp/${username}`;
-    } catch (error) {
-      console.error('Invalid Lightning address format:', url);
-      return '';
+    getLightning(url: string): Observable<LightningResponse> {
+        return this.http.get<LightningResponse>(url).pipe(
+            catchError((error) => {
+                console.error('Failed to fetch Lightning response:', error);
+                return of({ status: 'Failed' } as LightningResponse);
+            })
+        );
     }
-  }
 
-  sendZapRequest(
-    callback: string,
-    zapRequest: Event,
-    amount: string,
-    lnurl: string
-  ): Observable<LightningInvoice> {
-    const event = encodeURIComponent(JSON.stringify(zapRequest));
-    const requestUrl = `${callback}?amount=${amount}&nostr=${event}&lnurl=${lnurl}`;
-    return this.http.get<LightningInvoice>(requestUrl).pipe(
-      catchError((error) => {
-        console.error('Failed to send zap request:', error);
-        return of({ pr: '', status: 'Failed' } as LightningInvoice);
-      })
-    );
-  }
-
-  async login(): Promise<boolean> {
-    try {
-      if (window.webln && !window.webln.isEnabled()) {
-        await window.webln.enable();
-      }
-      return true;
-    } catch (error) {
-      console.error('WebLN login failed:', error);
-      return false;
+    getLightningInvoice(
+        url: string,
+        amount: string
+    ): Observable<LightningInvoice> {
+        const requestUrl = `${url}?amount=${amount}`;
+        return this.http.get<LightningInvoice>(requestUrl).pipe(
+            catchError((error) => {
+                console.error('Failed to fetch Lightning invoice:', error);
+                return of({ pr: '', status: 'Failed' } as LightningInvoice);
+            })
+        );
     }
-  }
 
-  hasWebln(): boolean {
-    return Boolean(window.webln);
-  }
-
-  async sendPayment(pr: string): Promise<any> {
-    try {
-      if (this.hasWebln()) {
-        return await window.webln.sendPayment(pr);
-      }
-      console.error('WebLN is not available');
-      return null;
-    } catch (error) {
-      console.error('Payment failed:', error);
-      throw error;
+    getLightningAddress(url: string): string {
+        try {
+            const [username, domain] = url.split('@');
+            return `https://${domain}/.well-known/lnurlp/${username}`;
+        } catch (error) {
+            console.error('Invalid Lightning address format:', url);
+            return '';
+        }
     }
-  }
 
-  async payInvoice(pr: string): Promise<boolean> {
-    const loggedIn = await this.login();
-    if (loggedIn && this.hasWebln()) {
-      try {
-        const response = await this.sendPayment(pr);
-        return Boolean(response);
-      } catch (error) {
-        console.error('Failed to pay invoice:', error);
+    sendZapRequest(
+        callback: string,
+        zapRequest: Event,
+        amount: string,
+        lnurl: string
+    ): Observable<LightningInvoice> {
+        const event = encodeURIComponent(JSON.stringify(zapRequest));
+        const requestUrl = `${callback}?amount=${amount}&nostr=${event}&lnurl=${lnurl}`;
+        return this.http.get<LightningInvoice>(requestUrl).pipe(
+            catchError((error) => {
+                console.error('Failed to send zap request:', error);
+                return of({ pr: '', status: 'Failed' } as LightningInvoice);
+            })
+        );
+    }
+
+    async login(): Promise<boolean> {
+        try {
+            if (window.webln && !window.webln.isEnabled()) {
+                await window.webln.enable();
+            }
+            return true;
+        } catch (error) {
+            console.error('WebLN login failed:', error);
+            return false;
+        }
+    }
+
+    hasWebln(): boolean {
+        return Boolean(window.webln);
+    }
+
+    async sendPayment(pr: string): Promise<any> {
+        try {
+            if (this.hasWebln()) {
+                return await window.webln.sendPayment(pr);
+            }
+            console.error('WebLN is not available');
+            return null;
+        } catch (error) {
+            console.error('Payment failed:', error);
+            throw error;
+        }
+    }
+
+    async payInvoice(pr: string): Promise<boolean> {
+        const loggedIn = await this.login();
+        if (loggedIn && this.hasWebln()) {
+            try {
+                const response = await this.sendPayment(pr);
+                return Boolean(response);
+            } catch (error) {
+                console.error('Failed to pay invoice:', error);
+                return false;
+            }
+        }
+        console.error('WebLN not available or login failed');
         return false;
-      }
     }
-    console.error('WebLN not available or login failed');
-    return false;
-  }
 }
diff --git a/src/app/services/link-preview.service.ts b/src/app/services/link-preview.service.ts
index 6ebf0b4..88724ce 100644
--- a/src/app/services/link-preview.service.ts
+++ b/src/app/services/link-preview.service.ts
@@ -1,25 +1,26 @@
-import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Preview } from '../types/preview';
 import { map } from 'rxjs/operators';
+import { Preview } from '../types/preview';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
 export class LinkPreviewService {
-
     private _accessKey = '5b54e80a65c77848ceaa4630331e8384950e09d392365';
     private _apiURL = 'https://api.linkpreview.net/';
 
     constructor(private http: HttpClient) {}
 
     fetchLink(url: string): Observable<Preview> {
-      console.log('fetching the following link: ', url);
-      const params = new HttpParams()
-        .append('key', this._accessKey)
-        .append('q', url);
-  
-      return this.http.get(this._apiURL, {params: params}).pipe(map(value => value as Preview));
+        console.log('fetching the following link: ', url);
+        const params = new HttpParams()
+            .append('key', this._accessKey)
+            .append('q', url);
+
+        return this.http
+            .get(this._apiURL, { params: params })
+            .pipe(map((value) => value as Preview));
     }
 }
diff --git a/src/app/services/metadata.service.ts b/src/app/services/metadata.service.ts
index b8f3709..1f0bb82 100644
--- a/src/app/services/metadata.service.ts
+++ b/src/app/services/metadata.service.ts
@@ -1,200 +1,297 @@
 import { Injectable } from '@angular/core';
+import { Filter, NostrEvent } from 'nostr-tools';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
 import { IndexedDBService } from './indexed-db.service';
 import { RelayService } from './relay.service';
-import { NostrEvent, Filter } from 'nostr-tools';
-import { debounceTime, throttleTime } from 'rxjs/operators';
+
+interface MetadataRequest {
+    pubkey: string;
+    isUrgent: boolean;
+    isGroup: boolean;
+}
 
 @Injectable({
-  providedIn: 'root',
+    providedIn: 'root',
 })
 export class MetadataService {
-  private metadataSubject = new BehaviorSubject<any>(null);
-  private requestQueue: Set<string> = new Set();
-  private isProcessingQueue = false;
-  private maxRequestsPerBatch = 3;
-  private requestDelay = 5000;
+    private metadataSubject = new BehaviorSubject<any>(null);
+    private requestQueue: Set<MetadataRequest> = new Set();
+    private isProcessingQueue = false;
+    private maxRequestsPerBatch = 3;
+    private requestDelay = 5000;
 
-  constructor(
-    private indexedDBService: IndexedDBService,
-    private relayService: RelayService
-  ) {}
+    constructor(
+        private indexedDBService: IndexedDBService,
+        private relayService: RelayService
+    ) {}
 
-  getMetadataStream(): Observable<any> {
-    return this.metadataSubject.asObservable().pipe(throttleTime(2000));
-  }
+    getMetadataStream(): Observable<any> {
+        return this.metadataSubject.asObservable().pipe(throttleTime(2000));
+    }
 
-  private enqueueRequest(pubkey: string): void {
-    this.requestQueue.add(pubkey);
-    this.processQueue();
-  }
-
-  async fetchMetadataForMultipleKeys(pubkeys: string[]): Promise<any[]> {
-    const filter: Filter = {
-      kinds: [0],
-      authors: pubkeys,
-    };
-
-    try {
-      await this.relayService.ensureConnectedRelays();
-      const connectedRelays = this.relayService.getConnectedRelays();
-
-      if (connectedRelays.length === 0) {
-        console.error('No relays are connected.');
-        return [];
-      }
-
-      const metadataList: any[] = [];
-
-      const sub = this.relayService.getPool().subscribeMany(connectedRelays, [filter], {
-        onevent: async (event: NostrEvent) => {
-          if (event.kind === 0) {
-            try {
-              const metadata = JSON.parse(event.content);
-              await this.indexedDBService.saveUserMetadata(event.pubkey, metadata);
-              metadataList.push({ pubkey: event.pubkey, metadata });
-
-            } catch (error) {
-              console.error('Error parsing metadata:', error);
-            }
-          }
-        },
-        oneose: () => {
+    enqueueRequest(pubkey: string, isUrgent: boolean = false, isGroup: boolean = false): void {
+        const request: MetadataRequest = { pubkey, isUrgent, isGroup };
+        if (isUrgent) {
+           
+            this.requestQueue = new Set([request, ...Array.from(this.requestQueue)]);
+        } else {
+            this.requestQueue.add(request);
         }
-      });
-
-      setTimeout(() => {
-        sub.close();
-      }, 1000 );
-
-      return metadataList;
-    } catch (error) {
-      console.error('Failed to fetch metadata for multiple keys:', error);
-      return [];
-    }
-  }
-
-  private async processQueue(): Promise<void> {
-    if (this.isProcessingQueue || this.requestQueue.size === 0) {
-      return;
+        this.processQueue();
     }
 
-    this.isProcessingQueue = true;
+    private async processQueue(): Promise<void> {
+        if (this.isProcessingQueue || this.requestQueue.size === 0) {
+            return;
+        }
 
-    while (this.requestQueue.size > 0) {
-      const batch = Array.from(this.requestQueue).slice(0, this.maxRequestsPerBatch);
-      this.requestQueue = new Set(Array.from(this.requestQueue).slice(this.maxRequestsPerBatch));
+        this.isProcessingQueue = true;
+
+        while (this.requestQueue.size > 0) {
+
+            const urgentRequests = Array.from(this.requestQueue).filter(req => req.isUrgent);
+            const batch = urgentRequests.length > 0
+                ? urgentRequests.slice(0, this.maxRequestsPerBatch)
+                : Array.from(this.requestQueue).slice(0, this.maxRequestsPerBatch);
+
+            this.requestQueue = new Set(
+                Array.from(this.requestQueue).slice(this.maxRequestsPerBatch)
+            );
+
+            await Promise.all(
+                batch.map(async (request) => {
+                    try {
+                        const updatedMetadata = request.isGroup
+                            ? await this.fetchMetadataForMultipleKeys([request.pubkey])
+                            : await this.fetchMetadataRealtime(request.pubkey);
+                        if (updatedMetadata) {
+                            await this.indexedDBService.saveUserMetadata(request.pubkey, updatedMetadata);
+                            this.metadataSubject.next(updatedMetadata);
+                        }
+                    } catch (error) {
+                        console.error(`Failed to update metadata for user: ${request.pubkey}`, error);
+                    }
+                })
+            );
+
+            await new Promise((resolve) => setTimeout(resolve, this.requestDelay));
+        }
+
+        this.isProcessingQueue = false;
+    }
+
+    async fetchMetadataForMultipleKeys(pubkeys: string[]): Promise<any[]> {
+        const filter: Filter = {
+            kinds: [0],
+            authors: pubkeys,
+        };
 
-      await Promise.all(batch.map(async (pubkey) => {
         try {
-          const updatedMetadata = await this.fetchMetadataRealtime(pubkey);
-          if (updatedMetadata) {
-            await this.indexedDBService.saveUserMetadata(pubkey, updatedMetadata);
-            this.metadataSubject.next(updatedMetadata);
-           }
+            await this.relayService.ensureConnectedRelays();
+            const connectedRelays = this.relayService.getConnectedRelays();
+
+            if (connectedRelays.length === 0) {
+                console.error('No relays are connected.');
+                return [];
+            }
+
+            const metadataList: any[] = [];
+
+            const sub = this.relayService
+                .getPool()
+                .subscribeMany(connectedRelays, [filter], {
+                    onevent: async (event: NostrEvent) => {
+                        if (event.kind === 0) {
+                            try {
+                                const metadata = JSON.parse(event.content);
+                                await this.indexedDBService.saveUserMetadata(
+                                    event.pubkey,
+                                    metadata
+                                );
+                                metadataList.push({
+                                    pubkey: event.pubkey,
+                                    metadata,
+                                });
+                            } catch (error) {
+                                console.error('Error parsing metadata:', error);
+                            }
+                        }
+                    },
+                    oneose: () => {},
+                });
+
+            setTimeout(() => {
+                sub.close();
+            }, 1000);
+
+            return metadataList;
         } catch (error) {
-          console.error(`Failed to update metadata for user: ${pubkey}`, error);
+            console.error('Failed to fetch metadata for multiple keys:', error);
+            return [];
         }
-      }));
-
-      await new Promise(resolve => setTimeout(resolve, this.requestDelay));
     }
 
-    this.isProcessingQueue = false;
-  }
+    async fetchMetadataWithCache(pubkey: string): Promise<any> {
 
-  async fetchMetadataWithCache(pubkey: string): Promise<any> {
-    const metadata = await this.indexedDBService.getUserMetadata(pubkey);
-    if (metadata) {
-      this.metadataSubject.next(metadata);
-     } else {
-      this.enqueueRequest(pubkey);
+        const cachedMetadata = await this.indexedDBService.getUserMetadata(pubkey);
+
+
+        if (cachedMetadata) {
+            return cachedMetadata;
+        }
+
+
+        return new Promise((resolve, reject) => {
+
+            this.enqueueRequest(pubkey);
+
+
+            const subscription = this.metadataSubject.asObservable().subscribe({
+                next: (updatedMetadata) => {
+                    if (updatedMetadata && updatedMetadata.pubkey === pubkey) {
+
+                        resolve(updatedMetadata);
+                        subscription.unsubscribe();
+                    }
+                },
+                error: (error) => {
+                    console.error('Error fetching metadata:', error);
+                    reject(error);
+                    subscription.unsubscribe();
+                }
+            });
+        });
     }
 
-    this.subscribeToMetadataUpdates(pubkey);
-    return metadata;
-  }
 
-  private subscribeToMetadataUpdates(pubkey: string): void {
-    this.relayService.ensureConnectedRelays().then(() => {
-      const filter: Filter = { authors: [pubkey], kinds: [0] };
+    private subscribeToMetadataUpdates(pubkey: string): void {
+        this.relayService.ensureConnectedRelays().then(() => {
+            const filter: Filter = { authors: [pubkey], kinds: [0] };
 
-      this.relayService.getPool().subscribeMany(this.relayService.getConnectedRelays(), [filter], {
-        onevent: async (event: NostrEvent) => {
-          if (event.pubkey === pubkey && event.kind === 0) {
-            try {
-              const updatedMetadata = JSON.parse(event.content);
-              await this.indexedDBService.saveUserMetadata(pubkey, updatedMetadata);
-              this.metadataSubject.next(updatedMetadata);
-             } catch (error) {
-              console.error('Error parsing updated metadata:', error);
+            this.relayService
+                .getPool()
+                .subscribeMany(
+                    this.relayService.getConnectedRelays(),
+                    [filter],
+                    {
+                        onevent: async (event: NostrEvent) => {
+                            if (event.pubkey === pubkey && event.kind === 0) {
+                                try {
+                                    const updatedMetadata = JSON.parse(
+                                        event.content
+                                    );
+                                    await this.indexedDBService.saveUserMetadata(
+                                        pubkey,
+                                        updatedMetadata
+                                    );
+                                    this.metadataSubject.next(updatedMetadata);
+                                } catch (error) {
+                                    console.error(
+                                        'Error parsing updated metadata:',
+                                        error
+                                    );
+                                }
+                            }
+                        },
+                        oneose() {},
+                    }
+                );
+        });
+    }
+
+    async fetchMetadataRealtime(pubkey: string): Promise<any> {
+        await this.relayService.ensureConnectedRelays();
+        const connectedRelays = this.relayService.getConnectedRelays();
+
+        if (connectedRelays.length === 0) {
+            throw new Error('No connected relays');
+        }
+
+        return new Promise<any>((resolve) => {
+            const sub = this.relayService
+                .getPool()
+                .subscribeMany(
+                    connectedRelays,
+                    [{ authors: [pubkey], kinds: [0] }],
+                    {
+                        onevent: (event: NostrEvent) => {
+                            if (event.pubkey === pubkey && event.kind === 0) {
+                                try {
+                                    const content = JSON.parse(event.content);
+                                    resolve(content);
+                                } catch (error) {
+                                    console.error(
+                                        'Error parsing event content:',
+                                        error
+                                    );
+                                    resolve(null);
+                                } finally {
+                                    sub.close();
+                                }
+                            }
+                        },
+                        oneose() {
+                            sub.close();
+                            resolve(null);
+                        },
+                    }
+                );
+        });
+    }
+
+    async refreshAllStoredMetadata(): Promise<void> {
+        const storedUsers = await this.indexedDBService.getAllUsers();
+        if (!storedUsers || storedUsers.length === 0) {
+            return;
+        }
+
+        storedUsers.forEach((user) => this.enqueueRequest(user.pubkey));
+    }
+
+    async getUserMetadata(pubkey: string): Promise<any> {
+        try {
+            const cachedMetadata =
+                await this.indexedDBService.getUserMetadata(pubkey);
+            if (cachedMetadata) {
+                return cachedMetadata;
             }
-          }
-        },
-        oneose(){},
-      });
-    });
-  }
 
-  async fetchMetadataRealtime(pubkey: string): Promise<any> {
-    await this.relayService.ensureConnectedRelays();
-    const connectedRelays = this.relayService.getConnectedRelays();
-
-    if (connectedRelays.length === 0) {
-      throw new Error('No connected relays');
-    }
-
-    return new Promise<any>((resolve) => {
-      const sub = this.relayService.getPool().subscribeMany(connectedRelays, [{ authors: [pubkey], kinds: [0] }], {
-        onevent: (event: NostrEvent) => {
-          if (event.pubkey === pubkey && event.kind === 0) {
-            try {
-              const content = JSON.parse(event.content);
-              resolve(content);
-            } catch (error) {
-              console.error('Error parsing event content:', error);
-              resolve(null);
-            } finally {
-              sub.close();
+            const liveMetadata = await this.fetchMetadataRealtime(pubkey);
+            if (liveMetadata) {
+                await this.indexedDBService.saveUserMetadata(
+                    pubkey,
+                    liveMetadata
+                );
+                return liveMetadata;
             }
-          }
-        },
-        oneose() {
-          sub.close();
-          resolve(null);
-        },
-      });
-    });
-  }
 
-  async refreshAllStoredMetadata(): Promise<void> {
-    const storedUsers = await this.indexedDBService.getAllUsers();
-    if (!storedUsers || storedUsers.length === 0) {
-      return;
+            return null;
+        } catch (error) {
+            console.error(`Error fetching metadata for user ${pubkey}:`, error);
+            return null;
+        }
     }
 
-    storedUsers.forEach(user => this.enqueueRequest(user.pubkey));
-  }
 
+    private async fetchFilteredEvents(filter: Filter): Promise<NostrEvent[]> {
+        await this.relayService.ensureConnectedRelays();
+        const connectedRelays = this.relayService.getConnectedRelays();
 
-  async getUserMetadata(pubkey: string): Promise<any> {
-    try {
-      const cachedMetadata = await this.indexedDBService.getUserMetadata(pubkey);
-      if (cachedMetadata) {
-        return cachedMetadata;
-      }
+        const eventMap = new Map<string, NostrEvent>();
+        const pool = this.relayService.getPool();
 
-      const liveMetadata = await this.fetchMetadataRealtime(pubkey);
-      if (liveMetadata) {
-        await this.indexedDBService.saveUserMetadata(pubkey, liveMetadata);
-        return liveMetadata;
-      }
+        await Promise.all(
+            connectedRelays.map(async (relay) => {
+                const events = await pool.querySync([relay], filter);
+                events.forEach((event) => {
+                    if (!eventMap.has(event.id)) {
+                        eventMap.set(event.id, event);
+                    }
+                });
+            })
+        );
 
-      return null;
-    } catch (error) {
-      console.error(`Error fetching metadata for user ${pubkey}:`, error);
-      return null;
+        return Array.from(eventMap.values());
     }
-  }
-
 }
diff --git a/src/app/services/nip05.service.ts b/src/app/services/nip05.service.ts
index 6c2ee42..d16fe3a 100644
--- a/src/app/services/nip05.service.ts
+++ b/src/app/services/nip05.service.ts
@@ -1,23 +1,19 @@
-import { Injectable } from '@angular/core';
-import { NIP05 } from '../types/nostr';
-import { Observable, of} from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { catchError } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { NIP05 } from '../types/nostr';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
 export class Nip05Service {
-
-    constructor(
-        private http: HttpClient
-    ) { }
+    constructor(private http: HttpClient) {}
 
     // url would be something like `brah@npubkey.com`
     // which needs to be processed to make the actual request
     getNIP05Url(url: string): string {
         // https://<domain>/.well-known/nostr.json?name=<local-part>
-        const splitUrl = url.split("@");
+        const splitUrl = url.split('@');
         const username = splitUrl[0];
         const domain = splitUrl[1];
         return `https://${domain}/.well-known/nostr.json?name=${username}`;
@@ -25,6 +21,6 @@ export class Nip05Service {
 
     getNIP05(nip05: string): Observable<NIP05> {
         const url = this.getNIP05Url(nip05);
-        return this.http.get<NIP05>(url)
+        return this.http.get<NIP05>(url);
     }
 }
diff --git a/src/app/services/nostr-band-api.service.ts b/src/app/services/nostr-band-api.service.ts
index bc293c8..862f502 100644
--- a/src/app/services/nostr-band-api.service.ts
+++ b/src/app/services/nostr-band-api.service.ts
@@ -1,38 +1,35 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { withCache } from '@ngneat/cashew';
 import { Observable } from 'rxjs';
 import { Kind0Content } from '../types/user';
-import { withCache } from '@ngneat/cashew';
 
 interface Profile {
     pubkey: string;
     new_followers_count: number;
     relays: Array<string>;
-    profile: Kind0Content
+    profile: Kind0Content;
 }
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root',
 })
 export class NostrBandApiService {
+    baseUrl: string = 'https://api.nostr.band/';
 
-    baseUrl: string = "https://api.nostr.band/";
+    trending: string = 'v0/trending/';
+    profiles: string = 'profiles';
+    notes: string = 'notes';
 
-    trending: string = "v0/trending/";
-    profiles: string = "profiles";
-    notes: string = "notes";
+    constructor(private http: HttpClient) {}
 
-    constructor(
-        private http: HttpClient
-    ) { }
-
-    getTrendingProfiles(): Observable<JSON>{
+    getTrendingProfiles(): Observable<JSON> {
         const url = `${this.baseUrl}${this.trending}${this.profiles}`;
-        return this.http.get<JSON>(url, {context: withCache()});
+        return this.http.get<JSON>(url, { context: withCache() });
     }
 
-    getTrendingNotes(): Observable<JSON>{
+    getTrendingNotes(): Observable<JSON> {
         const url = `${this.baseUrl}${this.trending}${this.notes}`;
-        return this.http.get<JSON>(url, {context: withCache()});
+        return this.http.get<JSON>(url, { context: withCache() });
     }
 }
diff --git a/src/app/services/notification.service.ts b/src/app/services/notification.service.ts
index 53bf57d..4765448 100644
--- a/src/app/services/notification.service.ts
+++ b/src/app/services/notification.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Filter, NostrEvent } from 'nostr-tools';
-import { Subject, Observable, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { RelayService } from './relay.service';
 
 export interface NostrNotification {
@@ -17,10 +17,9 @@ export interface NostrNotification {
 }
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class NotificationService {
-
     private notificationSubject = new BehaviorSubject<NostrNotification[]>([]);
     private notificationCount = new BehaviorSubject<number>(0);
     private lastNotificationTimestamp: number | null = null;
@@ -40,7 +39,9 @@ export class NotificationService {
     }
 
     private loadTimestampFromLocalStorage(): number | null {
-        const storedTimestamp = localStorage.getItem('lastNotificationTimestamp');
+        const storedTimestamp = localStorage.getItem(
+            'lastNotificationTimestamp'
+        );
         return storedTimestamp ? parseInt(storedTimestamp, 10) : null;
     }
 
@@ -59,10 +60,12 @@ export class NotificationService {
 
     private loadFilterPreferences(): number[] {
         const storedPreferences = localStorage.getItem('notificationSettings');
-        return storedPreferences ? JSON.parse(storedPreferences) : [1, 3, 4, 9735]; // Default to all kinds if not set
+        return storedPreferences
+            ? JSON.parse(storedPreferences)
+            : [1, 3, 4, 7, 9735]; // Default to all kinds if not set
     }
 
-     public async subscribeToNotifications(pubkey: string): Promise<void> {
+    public async subscribeToNotifications(pubkey: string): Promise<void> {
         await this.relayService.ensureConnectedRelays();
         const pool = this.relayService.getPool();
         const connectedRelays = this.relayService.getConnectedRelays();
@@ -74,30 +77,28 @@ export class NotificationService {
         const filterPreferences = this.loadFilterPreferences();
 
         if (filterPreferences.length === 0) {
-            filterPreferences.push(1, 3, 4, 9735);
+            filterPreferences.push(1, 3, 4, 7, 9735);
         }
 
         const filter: Filter = {
             kinds: filterPreferences,
             '#p': [pubkey],
             limit: 50,
-            since: lastNotificationTimestamp || undefined
+            since: lastNotificationTimestamp || undefined,
         };
 
         return new Promise((resolve) => {
             const sub = pool.subscribeMany(connectedRelays, [filter], {
-                onevent: (event: NostrEvent) => this.handleNotificationEvent(event, pubkey),
+                onevent: (event: NostrEvent) =>
+                    this.handleNotificationEvent(event, pubkey),
                 oneose() {
-                     resolve();
-                }
+                    resolve();
+                },
             });
         });
     }
 
     private handleNotificationEvent(event: NostrEvent, pubkey: string): void {
-        console.log('Received event:', event);
-
-
         if (this.isNotificationEvent(event, pubkey)) {
             const eventTimestamp = event.created_at * 1000;
             const formattedDate = new Date(eventTimestamp);
@@ -127,6 +128,11 @@ export class NotificationService {
                     notificationDescription = 'You have a new follower.';
                     notificationIcon = 'heroicons_outline:user-plus';
                     break;
+                case 7:
+                    notificationTitle = 'New Like';
+                    notificationDescription = 'You have a new Like.';
+                    notificationIcon = 'heroicons_outline:hand-thumb-up';
+                    break;
                 default:
                     notificationTitle = 'Notification';
                     notificationIcon = 'heroicons_outline:bell';
@@ -140,21 +146,20 @@ export class NotificationService {
                 description: notificationDescription,
                 time: formattedDate,
                 kind: event.kind,
-                read: false
+                read: false,
             };
 
-            console.log('Generated notification:', notification);
-
-
             const currentNotifications = this.notificationSubject.value;
-            const updatedNotifications = [notification, ...currentNotifications].slice(0, 50);
+            const updatedNotifications = [
+                notification,
+                ...currentNotifications,
+            ].slice(0, 50);
 
             this.notificationSubject.next(updatedNotifications);
             this.incrementNotificationCount(event.created_at);
         }
     }
 
-
     private incrementNotificationCount(timestamp: number): void {
         const newCount = this.notificationCount.value + 1;
         this.notificationCount.next(newCount);
@@ -162,10 +167,12 @@ export class NotificationService {
     }
 
     public markAllAsRead(): void {
-        const updatedNotifications = this.notificationSubject.value.map(notification => ({
-            ...notification,
-            read: true
-        }));
+        const updatedNotifications = this.notificationSubject.value.map(
+            (notification) => ({
+                ...notification,
+                read: true,
+            })
+        );
         this.notificationSubject.next(updatedNotifications);
         this.notificationCount.next(0);
         const currentTimestamp = Math.floor(Date.now() / 1000);
@@ -173,6 +180,6 @@ export class NotificationService {
     }
 
     private isNotificationEvent(event: NostrEvent, pubkey: string): boolean {
-        return event.tags.some(tag => tag[0] === 'p' && tag[1] === pubkey);
+        return event.tags.some((tag) => tag[0] === 'p' && tag[1] === pubkey);
     }
 }
diff --git a/src/app/services/projects.service.ts b/src/app/services/projects.service.ts
index 8a24981..e3b1c71 100644
--- a/src/app/services/projects.service.ts
+++ b/src/app/services/projects.service.ts
@@ -1,9 +1,9 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { of, Observable } from 'rxjs';
-import { IndexerService } from './indexer.service';
 import { IndexedDBService } from './indexed-db.service';
+import { IndexerService } from './indexer.service';
 
 export interface Project {
     founderKey: string;
@@ -53,16 +53,21 @@ export class ProjectsService {
         }
 
         this.loading = true;
-        const indexerUrl = this.indexerService.getPrimaryIndexer(this.selectedNetwork);
+        const indexerUrl = this.indexerService.getPrimaryIndexer(
+            this.selectedNetwork
+        );
         const url = this.totalProjectsFetched
             ? `${indexerUrl}api/query/Angor/projects?offset=${this.offset}&limit=${this.limit}`
             : `${indexerUrl}api/query/Angor/projects?limit=${this.limit}`;
 
         try {
-            const response = await this.http.get<Project[]>(url, { observe: 'response' }).toPromise();
+            const response = await this.http
+                .get<Project[]>(url, { observe: 'response' })
+                .toPromise();
 
             if (!this.totalProjectsFetched && response && response.headers) {
-                const paginationTotal = response.headers.get('pagination-total');
+                const paginationTotal =
+                    response.headers.get('pagination-total');
                 this.totalProjects = paginationTotal ? +paginationTotal : 0;
                 this.totalProjectsFetched = true;
                 this.offset = Math.max(this.totalProjects - this.limit, 0);
@@ -76,9 +81,12 @@ export class ProjectsService {
             }
 
             const uniqueNewProjects = newProjects.filter(
-                newProject => !this.projects.some(
-                    existingProject => existingProject.projectIdentifier === newProject.projectIdentifier
-                )
+                (newProject) =>
+                    !this.projects.some(
+                        (existingProject) =>
+                            existingProject.projectIdentifier ===
+                            newProject.projectIdentifier
+                    )
             );
 
             if (!uniqueNewProjects.length) {
@@ -86,22 +94,36 @@ export class ProjectsService {
                 return [];
             }
 
-            const saveProjectsPromises = uniqueNewProjects.map(async project => {
-                await this.indexedDBService.saveProject(project);
-            });
-
-            const projectDetailsPromises = uniqueNewProjects.map(async project => {
-                try {
-                    const projectStats = await this.indexedDBService.getProjectStats(project.projectIdentifier);
-                    project.totalInvestmentsCount = projectStats?.investorCount ?? 0;
-                    return project;
-                } catch (error) {
-                    console.error(`Error fetching details for project ${project.projectIdentifier}:`, error);
-                    return project;
+            const saveProjectsPromises = uniqueNewProjects.map(
+                async (project) => {
+                    await this.indexedDBService.saveProject(project);
                 }
-            });
+            );
 
-            await Promise.all([...saveProjectsPromises, ...projectDetailsPromises]);
+            const projectDetailsPromises = uniqueNewProjects.map(
+                async (project) => {
+                    try {
+                        const projectStats =
+                            await this.indexedDBService.getProjectStats(
+                                project.projectIdentifier
+                            );
+                        project.totalInvestmentsCount =
+                            projectStats?.investorCount ?? 0;
+                        return project;
+                    } catch (error) {
+                        console.error(
+                            `Error fetching details for project ${project.projectIdentifier}:`,
+                            error
+                        );
+                        return project;
+                    }
+                }
+            );
+
+            await Promise.all([
+                ...saveProjectsPromises,
+                ...projectDetailsPromises,
+            ]);
 
             this.projects = [...this.projects, ...uniqueNewProjects];
             this.offset = Math.max(this.offset - this.limit, 0);
@@ -116,49 +138,74 @@ export class ProjectsService {
     }
 
     fetchProjectStats(projectIdentifier: string): Observable<ProjectStats> {
-        const indexerUrl = this.indexerService.getPrimaryIndexer(this.selectedNetwork);
+        const indexerUrl = this.indexerService.getPrimaryIndexer(
+            this.selectedNetwork
+        );
         const url = `${indexerUrl}api/query/Angor/projects/${projectIdentifier}/stats`;
         return this.http.get<ProjectStats>(url).pipe(
             catchError((error) => {
-                console.error(`Error fetching stats for project ${projectIdentifier}:`, error);
+                console.error(
+                    `Error fetching stats for project ${projectIdentifier}:`,
+                    error
+                );
                 return of({} as ProjectStats);
             })
         );
     }
 
-    async fetchAndSaveProjectStats(projectIdentifier: string): Promise<ProjectStats | null> {
+    async fetchAndSaveProjectStats(
+        projectIdentifier: string
+    ): Promise<ProjectStats | null> {
         try {
-            const stats = await this.fetchProjectStats(projectIdentifier).toPromise();
+            const stats =
+                await this.fetchProjectStats(projectIdentifier).toPromise();
             if (stats) {
-                await this.indexedDBService.saveProjectStats(projectIdentifier, stats);
+                await this.indexedDBService.saveProjectStats(
+                    projectIdentifier,
+                    stats
+                );
             }
             return stats;
         } catch (error) {
-            console.error(`Error fetching and saving stats for project ${projectIdentifier}:`, error);
+            console.error(
+                `Error fetching and saving stats for project ${projectIdentifier}:`,
+                error
+            );
             return null;
         }
     }
 
     fetchProjectDetails(projectIdentifier: string): Observable<Project> {
-        const indexerUrl = this.indexerService.getPrimaryIndexer(this.selectedNetwork);
+        const indexerUrl = this.indexerService.getPrimaryIndexer(
+            this.selectedNetwork
+        );
         const url = `${indexerUrl}api/query/Angor/projects/${projectIdentifier}`;
         return this.http.get<Project>(url).pipe(
             catchError((error) => {
-                console.error(`Error fetching details for project ${projectIdentifier}:`, error);
+                console.error(
+                    `Error fetching details for project ${projectIdentifier}:`,
+                    error
+                );
                 return of({} as Project);
             })
         );
     }
 
-    async fetchAndSaveProjectDetails(projectIdentifier: string): Promise<Project | null> {
+    async fetchAndSaveProjectDetails(
+        projectIdentifier: string
+    ): Promise<Project | null> {
         try {
-            const project = await this.fetchProjectDetails(projectIdentifier).toPromise();
+            const project =
+                await this.fetchProjectDetails(projectIdentifier).toPromise();
             if (project) {
                 await this.indexedDBService.saveProject(project);
             }
             return project;
         } catch (error) {
-            console.error(`Error fetching and saving details for project ${projectIdentifier}:`, error);
+            console.error(
+                `Error fetching and saving details for project ${projectIdentifier}:`,
+                error
+            );
             return null;
         }
     }
@@ -167,7 +214,9 @@ export class ProjectsService {
         return this.indexedDBService.getAllProjects();
     }
 
-    async getProjectStatsFromDB(projectIdentifier: string): Promise<ProjectStats | null> {
+    async getProjectStatsFromDB(
+        projectIdentifier: string
+    ): Promise<ProjectStats | null> {
         return this.indexedDBService.getProjectStats(projectIdentifier);
     }
 
diff --git a/src/app/services/relay.service.ts b/src/app/services/relay.service.ts
index d1f3cde..c735123 100644
--- a/src/app/services/relay.service.ts
+++ b/src/app/services/relay.service.ts
@@ -1,17 +1,31 @@
-import { Injectable } from "@angular/core";
-import { BehaviorSubject, Observable } from "rxjs";
-import { NostrEvent, SimplePool } from "nostr-tools";
+import { Injectable } from '@angular/core';
+import { NostrEvent, SimplePool } from 'nostr-tools';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable({
     providedIn: 'root',
 })
 export class RelayService {
     private pool: SimplePool;
-    private relays: { url: string, connected: boolean, retries: number, retryTimeout: any, accessType: string, ws?: WebSocket }[] = [];
+    private relays: {
+        url: string;
+        connected: boolean;
+        retries: number;
+        retryTimeout: any;
+        accessType: string;
+        ws?: WebSocket;
+    }[] = [];
     private maxRetries = 10;
     private retryDelay = 15000;
     private eventSubject = new BehaviorSubject<NostrEvent | null>(null);
-    private relaysSubject = new BehaviorSubject<{ url: string, connected: boolean, accessType: string, ws?: WebSocket }[]>([]);
+    private relaysSubject = new BehaviorSubject<
+        {
+            url: string;
+            connected: boolean;
+            accessType: string;
+            ws?: WebSocket;
+        }[]
+    >([]);
 
     constructor() {
         this.pool = new SimplePool();
@@ -21,26 +35,65 @@ export class RelayService {
         this.relaysSubject.next(this.relays);
     }
 
-    private loadRelaysFromLocalStorage(): { url: string, connected: boolean, retries: number, retryTimeout: any, accessType: string, ws?: WebSocket }[] {
-        const storedRelays = JSON.parse(localStorage.getItem('nostrRelays') || '[]');
+    private loadRelaysFromLocalStorage(): {
+        url: string;
+        connected: boolean;
+        retries: number;
+        retryTimeout: any;
+        accessType: string;
+        ws?: WebSocket;
+    }[] {
+        const storedRelays = JSON.parse(
+            localStorage.getItem('nostrRelays') || '[]'
+        );
         const defaultRelays = [
-            { url: 'wss://relay.primal.net', connected: false, retries: 0, retryTimeout: null, accessType: 'read-write', ws: undefined },
-            { url: 'wss://relay.damus.io', connected: false, retries: 0, retryTimeout: null, accessType: 'read-write', ws: undefined },
-            { url: 'wss://relay.angor.io', connected: false, retries: 0, retryTimeout: null, accessType: 'read-write', ws: undefined },
-            { url: 'wss://relay2.angor.io', connected: false, retries: 0, retryTimeout: null, accessType: 'read-write', ws: undefined },
+            {
+                url: 'wss://relay.primal.net',
+                connected: false,
+                retries: 0,
+                retryTimeout: null,
+                accessType: 'read-write',
+                ws: undefined,
+            },
+            {
+                url: 'wss://relay.damus.io',
+                connected: false,
+                retries: 0,
+                retryTimeout: null,
+                accessType: 'read-write',
+                ws: undefined,
+            },
+            {
+                url: 'wss://relay.angor.io',
+                connected: false,
+                retries: 0,
+                retryTimeout: null,
+                accessType: 'read-write',
+                ws: undefined,
+            },
+            {
+                url: 'wss://relay2.angor.io',
+                connected: false,
+                retries: 0,
+                retryTimeout: null,
+                accessType: 'read-write',
+                ws: undefined,
+            },
         ];
 
-        return storedRelays.length > 0 ? storedRelays.map(relay => ({
-            ...relay,
-            connected: false,
-            retries: 0,
-            retryTimeout: null,
-            ws: undefined,
-        })) : defaultRelays;
+        return storedRelays.length > 0
+            ? storedRelays.map((relay) => ({
+                  ...relay,
+                  connected: false,
+                  retries: 0,
+                  retryTimeout: null,
+                  ws: undefined,
+              }))
+            : defaultRelays;
     }
 
     private saveRelaysToLocalStorage(): void {
-        const relaysToSave = this.relays.map(relay => ({
+        const relaysToSave = this.relays.map((relay) => ({
             url: relay.url,
             accessType: relay.accessType,
             connected: relay.connected,
@@ -51,7 +104,14 @@ export class RelayService {
         this.relaysSubject.next(this.relays);
     }
 
-    private connectToRelay(relay: { url: string, connected: boolean, retries: number, retryTimeout: any, accessType: string, ws?: WebSocket }): void {
+    private connectToRelay(relay: {
+        url: string;
+        connected: boolean;
+        retries: number;
+        retryTimeout: any;
+        accessType: string;
+        ws?: WebSocket;
+    }): void {
         if (relay.connected) {
             return;
         }
@@ -77,7 +137,10 @@ export class RelayService {
 
         relay.ws.onmessage = (message) => {
             try {
-                const dataStr = typeof message.data === 'string' ? message.data : message.data.toString('utf-8');
+                const dataStr =
+                    typeof message.data === 'string'
+                        ? message.data
+                        : message.data.toString('utf-8');
                 const parsedData = JSON.parse(dataStr);
                 this.eventSubject.next(parsedData);
             } catch (error) {
@@ -86,9 +149,18 @@ export class RelayService {
         };
     }
 
-    private handleRelayError(relay: { url: string, connected: boolean, retries: number, retryTimeout: any, accessType: string, ws?: WebSocket }): void {
+    private handleRelayError(relay: {
+        url: string;
+        connected: boolean;
+        retries: number;
+        retryTimeout: any;
+        accessType: string;
+        ws?: WebSocket;
+    }): void {
         if (relay.retries >= this.maxRetries) {
-            console.error(`Max retries reached for relay: ${relay.url}. No further attempts will be made.`);
+            console.error(
+                `Max retries reached for relay: ${relay.url}. No further attempts will be made.`
+            );
             return;
         }
 
@@ -131,7 +203,7 @@ export class RelayService {
         });
 
         window.addEventListener('beforeunload', () => {
-            this.relays.forEach(relay => {
+            this.relays.forEach((relay) => {
                 if (relay.ws) {
                     relay.ws.close();
                 }
@@ -140,64 +212,127 @@ export class RelayService {
     }
 
     public getConnectedRelays(): string[] {
-        return this.relays.filter((relay) => relay.connected).map((relay) => relay.url);
+        return this.relays
+            .filter((relay) => relay.connected)
+            .map((relay) => relay.url);
     }
 
-    public getRelays(): Observable<{ url: string, connected: boolean, accessType: string, ws?: WebSocket }[]> {
+    public getRelays(): Observable<
+        {
+            url: string;
+            connected: boolean;
+            accessType: string;
+            ws?: WebSocket;
+        }[]
+    > {
         return this.relaysSubject.asObservable();
     }
 
-    public publishEventToWriteRelays(event: NostrEvent): void {
-        const writeRelays = this.relays.filter(relay => relay.accessType === 'write' || relay.accessType === 'read-write');
-        writeRelays.forEach((relay) => {
-            if (relay.connected && relay.ws?.readyState === WebSocket.OPEN) {
-                relay.ws.send(JSON.stringify(event));
-            }
-        });
-    }
+    async publishEventToWriteRelays(event: NostrEvent): Promise<NostrEvent> {
+        const pool = this.getPool();
 
-
-    async publishEventToRelays(event: NostrEvent): Promise<NostrEvent> {
-         const pool = this.getPool();
         const connectedRelays = this.getConnectedRelays();
+        console.log('Connected relays:', connectedRelays);
 
-        if (connectedRelays.length === 0) {
-          throw new Error('No connected relays');
+        const writeRelays = this.relays.filter(
+            (relay) =>
+                relay.accessType === 'write' ||
+                relay.accessType === 'read-write'
+        );
+        console.log('Write relays:', writeRelays);
+
+        const allowedRelays = writeRelays
+            .map((relay) => relay.url)
+            .filter((url) => connectedRelays.includes(url));
+
+        if (allowedRelays.length === 0) {
+            throw new Error('No connected write relays available');
         }
 
-        const publishPromises = connectedRelays.map(async (relayUrl) => {
-          try {
-            await pool.publish([relayUrl], event);
-            this.eventSubject.next(event); // Emit the event to subscribers
-            return event;
-          } catch (error) {
-            console.error(`Failed to publish event to relay: ${relayUrl}`, error);
-            throw error;
-          }
+        console.log('Allowed relays for publishing:', allowedRelays);
+
+        const publishPromises = allowedRelays.map(async (relayUrl) => {
+            try {
+                await pool.publish([relayUrl], event);
+                this.eventSubject.next(event);
+                return event;
+            } catch (error) {
+                console.error(
+                    `Failed to publish event to relay: ${relayUrl}`,
+                    error
+                );
+                throw error;
+            }
         });
 
         try {
-          await Promise.any(publishPromises);
-          return event;
+            await Promise.any(publishPromises);
+            return event;
         } catch (aggregateError) {
-          console.error('Failed to publish event: AggregateError', aggregateError);
-          this.handlePublishFailure(aggregateError);
-          throw aggregateError;
+            console.error(
+                'Failed to publish event: AggregateError',
+                aggregateError
+            );
+            this.handlePublishFailure(aggregateError);
+            throw aggregateError;
         }
-      }
+    }
 
-      private handlePublishFailure(error: unknown): void {
+    async publishEventToRelays(event: NostrEvent): Promise<NostrEvent> {
+        const pool = this.getPool();
+        const connectedRelays = this.getConnectedRelays();
+
+        if (connectedRelays.length === 0) {
+            throw new Error('No connected relays');
+        }
+
+        const publishPromises = connectedRelays.map(async (relayUrl) => {
+            try {
+                await pool.publish([relayUrl], event);
+                this.eventSubject.next(event); // Emit the event to subscribers
+                return event;
+            } catch (error) {
+                console.error(
+                    `Failed to publish event to relay: ${relayUrl}`,
+                    error
+                );
+                throw error;
+            }
+        });
+
+        try {
+            await Promise.any(publishPromises);
+            return event;
+        } catch (aggregateError) {
+            console.error(
+                'Failed to publish event: AggregateError',
+                aggregateError
+            );
+            this.handlePublishFailure(aggregateError);
+            throw aggregateError;
+        }
+    }
+
+    private handlePublishFailure(error: unknown): void {
         if (error instanceof AggregateError) {
-          console.error('All relays failed to publish the event. Retrying...');
+            console.error(
+                'All relays failed to publish the event. Retrying...'
+            );
         } else {
-          console.error('An unexpected error occurred:', error);
+            console.error('An unexpected error occurred:', error);
         }
-      }
-
+    }
 
     public addRelay(url: string, accessType: string = 'read-write'): void {
-        if (!this.relays.some(relay => relay.url === url)) {
-            const newRelay = { url, connected: false, retries: 0, retryTimeout: null, accessType, ws: undefined };
+        if (!this.relays.some((relay) => relay.url === url)) {
+            const newRelay = {
+                url,
+                connected: false,
+                retries: 0,
+                retryTimeout: null,
+                accessType,
+                ws: undefined,
+            };
             this.relays.push(newRelay);
             this.connectToRelay(newRelay);
             this.saveRelaysToLocalStorage();
@@ -205,18 +340,20 @@ export class RelayService {
     }
 
     public removeRelay(url: string): void {
-        this.relays = this.relays.filter(relay => relay.url !== url);
+        this.relays = this.relays.filter((relay) => relay.url !== url);
         this.saveRelaysToLocalStorage();
     }
 
     public removeAllCustomRelays(): void {
         const defaultRelays = ['wss://relay.angor.io', 'wss://relay2.angor.io'];
-        this.relays = this.relays.filter(relay => defaultRelays.includes(relay.url));
+        this.relays = this.relays.filter((relay) =>
+            defaultRelays.includes(relay.url)
+        );
         this.saveRelaysToLocalStorage();
     }
 
     public updateRelayAccessType(url: string, accessType: string): void {
-        const relay = this.relays.find(relay => relay.url === url);
+        const relay = this.relays.find((relay) => relay.url === url);
         if (relay) {
             relay.accessType = accessType;
             this.saveRelaysToLocalStorage();
diff --git a/src/app/services/security.service.ts b/src/app/services/security.service.ts
index eddffde..6e31928 100644
--- a/src/app/services/security.service.ts
+++ b/src/app/services/security.service.ts
@@ -2,89 +2,94 @@ import { Injectable } from '@angular/core';
 import { base64 } from '@scure/base';
 
 @Injectable({
-  providedIn: 'root',
+    providedIn: 'root',
 })
 export class SecurityService {
-  private encoder = new TextEncoder();
-  private decoder = new TextDecoder();
+    private encoder = new TextEncoder();
+    private decoder = new TextDecoder();
 
-  private async getPasswordKey(password: string): Promise<CryptoKey> {
-    return window.crypto.subtle.importKey(
-      'raw',
-      this.encoder.encode(password),
-      'PBKDF2',
-      false,
-      ['deriveKey']
-    );
-  }
-
-  private async deriveKey(
-    passwordKey: CryptoKey,
-    salt: Uint8Array,
-    keyUsage: KeyUsage[]
-  ): Promise<CryptoKey> {
-    return window.crypto.subtle.deriveKey(
-      {
-        name: 'PBKDF2',
-        salt: salt,
-        iterations: 250000,
-        hash: 'SHA-256',
-      },
-      passwordKey,
-      { name: 'AES-GCM', length: 256 },
-      false,
-      keyUsage
-    );
-  }
-
-  async encryptData(secretData: string, password: string): Promise<string> {
-    try {
-      const salt = window.crypto.getRandomValues(new Uint8Array(16));
-      const iv = window.crypto.getRandomValues(new Uint8Array(12));
-      const passwordKey = await this.getPasswordKey(password);
-      const aesKey = await this.deriveKey(passwordKey, salt, ['encrypt']);
-
-      const encryptedContent = new Uint8Array(
-        await window.crypto.subtle.encrypt(
-          { name: 'AES-GCM', iv: iv },
-          aesKey,
-          this.encoder.encode(secretData)
-        )
-      );
-
-      const encryptedData = new Uint8Array(salt.length + iv.length + encryptedContent.length);
-      encryptedData.set(salt, 0);
-      encryptedData.set(iv, salt.length);
-      encryptedData.set(encryptedContent, salt.length + iv.length);
-
-      return base64.encode(encryptedData);
-    } catch (e) {
-      console.error('Encryption failed:', e);
-      throw new Error('Failed to encrypt data.');
+    private async getPasswordKey(password: string): Promise<CryptoKey> {
+        return window.crypto.subtle.importKey(
+            'raw',
+            this.encoder.encode(password),
+            'PBKDF2',
+            false,
+            ['deriveKey']
+        );
     }
-  }
 
-  async decryptData(encryptedData: string, password: string): Promise<string> {
-    try {
-      const encryptedDataBuff = base64.decode(encryptedData);
-
-      const salt = encryptedDataBuff.slice(0, 16);
-      const iv = encryptedDataBuff.slice(16, 28);
-      const data = encryptedDataBuff.slice(28);
-
-      const passwordKey = await this.getPasswordKey(password);
-      const aesKey = await this.deriveKey(passwordKey, salt, ['decrypt']);
-
-      const decryptedContent = await window.crypto.subtle.decrypt(
-        { name: 'AES-GCM', iv: iv },
-        aesKey,
-        data
-      );
-
-      return this.decoder.decode(decryptedContent);
-    } catch (e) {
-      console.error('Decryption failed:', e);
-      throw new Error('Failed to decrypt data.');
+    private async deriveKey(
+        passwordKey: CryptoKey,
+        salt: Uint8Array,
+        keyUsage: KeyUsage[]
+    ): Promise<CryptoKey> {
+        return window.crypto.subtle.deriveKey(
+            {
+                name: 'PBKDF2',
+                salt: salt,
+                iterations: 250000,
+                hash: 'SHA-256',
+            },
+            passwordKey,
+            { name: 'AES-GCM', length: 256 },
+            false,
+            keyUsage
+        );
+    }
+
+    async encryptData(secretData: string, password: string): Promise<string> {
+        try {
+            const salt = window.crypto.getRandomValues(new Uint8Array(16));
+            const iv = window.crypto.getRandomValues(new Uint8Array(12));
+            const passwordKey = await this.getPasswordKey(password);
+            const aesKey = await this.deriveKey(passwordKey, salt, ['encrypt']);
+
+            const encryptedContent = new Uint8Array(
+                await window.crypto.subtle.encrypt(
+                    { name: 'AES-GCM', iv: iv },
+                    aesKey,
+                    this.encoder.encode(secretData)
+                )
+            );
+
+            const encryptedData = new Uint8Array(
+                salt.length + iv.length + encryptedContent.length
+            );
+            encryptedData.set(salt, 0);
+            encryptedData.set(iv, salt.length);
+            encryptedData.set(encryptedContent, salt.length + iv.length);
+
+            return base64.encode(encryptedData);
+        } catch (e) {
+            console.error('Encryption failed:', e);
+            throw new Error('Failed to encrypt data.');
+        }
+    }
+
+    async decryptData(
+        encryptedData: string,
+        password: string
+    ): Promise<string> {
+        try {
+            const encryptedDataBuff = base64.decode(encryptedData);
+
+            const salt = encryptedDataBuff.slice(0, 16);
+            const iv = encryptedDataBuff.slice(16, 28);
+            const data = encryptedDataBuff.slice(28);
+
+            const passwordKey = await this.getPasswordKey(password);
+            const aesKey = await this.deriveKey(passwordKey, salt, ['decrypt']);
+
+            const decryptedContent = await window.crypto.subtle.decrypt(
+                { name: 'AES-GCM', iv: iv },
+                aesKey,
+                data
+            );
+
+            return this.decoder.decode(decryptedContent);
+        } catch (e) {
+            console.error('Decryption failed:', e);
+            throw new Error('Failed to decrypt data.');
+        }
     }
-  }
 }
diff --git a/src/app/services/signer.service.ts b/src/app/services/signer.service.ts
index 0b6a3d4..1048936 100644
--- a/src/app/services/signer.service.ts
+++ b/src/app/services/signer.service.ts
@@ -1,33 +1,40 @@
 import { Injectable } from '@angular/core';
-import { UnsignedEvent, nip19, getPublicKey, nip04, Event, generateSecretKey, finalizeEvent } from 'nostr-tools';
+import { MatDialog } from '@angular/material/dialog';
+import { hexToBytes } from '@noble/hashes/utils';
+import { PasswordDialogComponent } from 'app/shared/password-dialog/password-dialog.component';
 import { Buffer } from 'buffer';
+import {
+    Event,
+    UnsignedEvent,
+    finalizeEvent,
+    generateSecretKey,
+    getPublicKey,
+    nip04,
+    nip19,
+} from 'nostr-tools';
 import { privateKeyFromSeedWords } from 'nostr-tools/nip06';
 import { SecurityService } from './security.service';
-import { hexToBytes } from '@noble/hashes/utils';
-import { MatDialog } from '@angular/material/dialog';
-import { PasswordDialogComponent } from 'app/shared/password-dialog/password-dialog.component';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class SignerService {
-
-    localStorageSecretKeyName: string = "secretKey";
-    localStoragePublicKeyName: string = "publicKey";
-    localStorageNpubName: string = "npub";
-    localStorageNsecName: string = "nsec";
+    localStorageSecretKeyName: string = 'secretKey';
+    localStoragePublicKeyName: string = 'publicKey';
+    localStorageNpubName: string = 'npub';
+    localStorageNsecName: string = 'nsec';
     private storageKey = 'userPassword';
 
     constructor(
         private securityService: SecurityService,
         private dialog: MatDialog
-    ) { }
+    ) {}
 
     savePassword(password: string, durationInMinutes: number): void {
         const expirationTime = Date.now() + durationInMinutes * 60 * 1000;
         const passwordData = {
             password,
-            expirationTime
+            expirationTime,
         };
         sessionStorage.setItem(this.storageKey, JSON.stringify(passwordData));
     }
@@ -50,7 +57,11 @@ export class SignerService {
         sessionStorage.removeItem(this.storageKey);
     }
 
-    async changePassword(currentPassword: string, newPassword: string , savePassword:boolean): Promise<boolean> {
+    async changePassword(
+        currentPassword: string,
+        newPassword: string,
+        savePassword: boolean
+    ): Promise<boolean> {
         try {
             const secretKey = await this.getSecretKey(currentPassword);
             if (!secretKey) {
@@ -72,18 +83,16 @@ export class SignerService {
 
             return true;
         } catch (error) {
-            console.error("Failed to change password: ", error);
+            console.error('Failed to change password: ', error);
             return false;
         }
     }
 
-
-
     getUsername(pubkey: string) {
-        if (pubkey.startsWith("npub")) {
+        if (pubkey.startsWith('npub')) {
             pubkey = nip19.decode(pubkey).data.toString();
         }
-        return `@${(localStorage.getItem(`${pubkey}`) || nip19.npubEncode(pubkey))}`;
+        return `@${localStorage.getItem(`${pubkey}`) || nip19.npubEncode(pubkey)}`;
     }
 
     npub() {
@@ -94,7 +103,7 @@ export class SignerService {
     async requestPassword(): Promise<any> {
         const dialogRef = this.dialog.open(PasswordDialogComponent, {
             width: '300px',
-            disableClose: true
+            disableClose: true,
         });
 
         return dialogRef.afterClosed().toPromise();
@@ -103,13 +112,14 @@ export class SignerService {
     async nsec(password: string) {
         if (this.usingSecretKey()) {
             let secretKey = await this.getSecretKey(password);
-            const secretKeyUint8Array = Uint8Array.from(Buffer.from(secretKey, 'hex'));
+            const secretKeyUint8Array = Uint8Array.from(
+                Buffer.from(secretKey, 'hex')
+            );
             return nip19.nsecEncode(secretKeyUint8Array);
         }
-        return "";
+        return '';
     }
 
-
     pubkey(npub: string) {
         return nip19.decode(npub).data.toString();
     }
@@ -122,7 +132,7 @@ export class SignerService {
     }
 
     getPublicKey() {
-        return localStorage.getItem(this.localStoragePublicKeyName) || "";
+        return localStorage.getItem(this.localStoragePublicKeyName) || '';
     }
 
     //npub===============
@@ -136,16 +146,27 @@ export class SignerService {
 
     //seckey===============
     async setSecretKey(secretKey: string, password: string) {
-        const encryptedSecretKey = await this.securityService.encryptData(secretKey, password);
-        localStorage.setItem(this.localStorageSecretKeyName, encryptedSecretKey);
+        const encryptedSecretKey = await this.securityService.encryptData(
+            secretKey,
+            password
+        );
+        localStorage.setItem(
+            this.localStorageSecretKeyName,
+            encryptedSecretKey
+        );
     }
 
     async getSecretKey(password: string) {
-        const encryptedSecretKey = localStorage.getItem(this.localStorageSecretKeyName);
+        const encryptedSecretKey = localStorage.getItem(
+            this.localStorageSecretKeyName
+        );
         if (!encryptedSecretKey) {
             return null;
         }
-        return await this.securityService.decryptData(encryptedSecretKey, password);
+        return await this.securityService.decryptData(
+            encryptedSecretKey,
+            password
+        );
     }
 
     async getDecryptedSecretKey(): Promise<string | null> {
@@ -157,7 +178,9 @@ export class SignerService {
 
             const result = await this.requestPassword(); // Prompt user for password if not stored
             if (result?.password) {
-                const decryptedPrivateKey = await this.getSecretKey(result.password); // Check that the private key is decrypted properly
+                const decryptedPrivateKey = await this.getSecretKey(
+                    result.password
+                ); // Check that the private key is decrypted properly
                 if (result.duration !== 0) {
                     this.savePassword(result.password, result.duration);
                 }
@@ -174,7 +197,10 @@ export class SignerService {
 
     //nsec===============
     async setNsec(nsec: string, password: string) {
-        const encryptedNsec = await this.securityService.encryptData(nsec, password);
+        const encryptedNsec = await this.securityService.encryptData(
+            nsec,
+            password
+        );
         localStorage.setItem(this.localStorageNsecName, encryptedNsec);
     }
 
@@ -207,10 +233,14 @@ export class SignerService {
             } else if (/^[0-9a-fA-F]{64}$/.test(key)) {
                 secretKey = key;
             } else {
-                throw new Error('Invalid key format. Must be either nsec or hex.');
+                throw new Error(
+                    'Invalid key format. Must be either nsec or hex.'
+                );
             }
 
-            const secretKeyUint8Array = new Uint8Array(Buffer.from(secretKey, 'hex'));
+            const secretKeyUint8Array = new Uint8Array(
+                Buffer.from(secretKey, 'hex')
+            );
             pubkey = getPublicKey(secretKeyUint8Array);
             npub = nip19.npubEncode(pubkey);
             nsec = nip19.nsecEncode(secretKeyUint8Array);
@@ -221,16 +251,26 @@ export class SignerService {
 
             return true;
         } catch (e) {
-            console.error("Error during key handling: ", e);
+            console.error('Error during key handling: ', e);
             return false;
         }
     }
 
-    handleLoginWithMenemonic(mnemonic: string, passphrase: string = '', password: string): boolean {
+    handleLoginWithMenemonic(
+        mnemonic: string,
+        passphrase: string = '',
+        password: string
+    ): boolean {
         try {
             const accountIndex = 0;
-            const secretKey = privateKeyFromSeedWords(mnemonic, passphrase, accountIndex);
-            const secretKeyUint8Array = Uint8Array.from(Buffer.from(secretKey, 'hex'));
+            const secretKey = privateKeyFromSeedWords(
+                mnemonic,
+                passphrase,
+                accountIndex
+            );
+            const secretKeyUint8Array = Uint8Array.from(
+                Buffer.from(secretKey, 'hex')
+            );
             const pubkey = getPublicKey(secretKeyUint8Array);
             const npub = nip19.npubEncode(pubkey);
             const nsec = nip19.nsecEncode(secretKeyUint8Array);
@@ -242,7 +282,7 @@ export class SignerService {
             window.localStorage.setItem(this.localStorageNsecName, nsec);
             return true;
         } catch (error) {
-            console.error("Error during login with mnemonic:", error);
+            console.error('Error during login with mnemonic:', error);
             return false;
         }
     }
@@ -266,7 +306,12 @@ export class SignerService {
         return !!localStorage.getItem(this.localStorageSecretKeyName);
     }
 
-    generateAndStoreKeys(password: string): { secretKey: string, pubkey: string, npub: string, nsec: string } | null {
+    generateAndStoreKeys(password: string): {
+        secretKey: string;
+        pubkey: string;
+        npub: string;
+        nsec: string;
+    } | null {
         try {
             const privateKeyUint8Array = generateSecretKey();
             const secretKey = Buffer.from(privateKeyUint8Array).toString('hex');
@@ -280,20 +325,24 @@ export class SignerService {
 
             return { secretKey, pubkey, npub, nsec };
         } catch (error) {
-            console.error("Error during key generation:", error);
+            console.error('Error during key generation:', error);
             return null;
         }
     }
 
     async handleLoginWithExtension(): Promise<boolean> {
-        const globalContext = globalThis as unknown as { nostr?: { getPublicKey?: Function } };
+        const globalContext = globalThis as unknown as {
+            nostr?: { getPublicKey?: Function };
+        };
         if (!globalContext.nostr) {
             return false;
         }
         try {
             const pubkey = await globalContext.nostr.getPublicKey();
             if (!pubkey) {
-                throw new Error("Public key not available from Nostr extension.");
+                throw new Error(
+                    'Public key not available from Nostr extension.'
+                );
             }
 
             this.setPublicKeyFromExtension(pubkey);
@@ -304,13 +353,18 @@ export class SignerService {
         }
     }
 
-
-
-
-    async encryptMessage(privateKey: string, recipientPublicKey: string, message: string): Promise<string> {
+    async encryptMessage(
+        privateKey: string,
+        recipientPublicKey: string,
+        message: string
+    ): Promise<string> {
         console.log(message);
         try {
-            const encryptedMessage = await nip04.encrypt(privateKey, recipientPublicKey, message);
+            const encryptedMessage = await nip04.encrypt(
+                privateKey,
+                recipientPublicKey,
+                message
+            );
             return encryptedMessage;
         } catch (error) {
             console.error('Error encrypting message:', error);
@@ -318,41 +372,54 @@ export class SignerService {
         }
     }
 
-    async encryptMessageWithExtension(content: string, pubKey: string): Promise<string> {
+    async encryptMessageWithExtension(
+        content: string,
+        pubKey: string
+    ): Promise<string> {
         const gt = globalThis as any;
         const encryptedMessage = await gt.nostr.nip04.encrypt(pubKey, content);
         return encryptedMessage;
     }
 
-
     // Messaging (NIP-04)
-    async decryptMessageWithExtension(pubkey: string, ciphertext: string): Promise<string> {
+    async decryptMessageWithExtension(
+        pubkey: string,
+        ciphertext: string
+    ): Promise<string> {
         const gt = globalThis as any;
 
         // Check if Nostr extension and decrypt function are available
         if (gt.nostr && typeof gt.nostr.nip04?.decrypt === 'function') {
             try {
                 // Attempt to decrypt the message using the Nostr extension
-                const decryptedContent = await gt.nostr.nip04.decrypt(pubkey, ciphertext);
+                const decryptedContent = await gt.nostr.nip04.decrypt(
+                    pubkey,
+                    ciphertext
+                );
                 return decryptedContent;
             } catch (error) {
                 console.error('Decryption failed:', error);
-                return "*Failed to decrypt content: " + error.message + "*";
+                return '*Failed to decrypt content: ' + error.message + '*';
             }
         }
 
         // If the Nostr extension is not available
         console.warn('Nostr extension or decrypt method is unavailable');
-        return "Attempted Nostr Window decryption and failed.";
+        return 'Attempted Nostr Window decryption and failed.';
     }
 
-
     // NIP-04: Decrypting Direct Messages
-    async decryptMessage(privateKey: string, senderPublicKey: string, encryptedMessage: string): Promise<string> {
+    async decryptMessage(
+        privateKey: string,
+        senderPublicKey: string,
+        encryptedMessage: string
+    ): Promise<string> {
         try {
             // Check if privateKey, senderPublicKey, and encryptedMessage are provided
             if (!privateKey || !senderPublicKey || !encryptedMessage) {
-                throw new Error('Private key, public key, or encrypted message is missing or undefined.');
+                throw new Error(
+                    'Private key, public key, or encrypted message is missing or undefined.'
+                );
             }
 
             // Log for debugging purposes (ensure these are correct)
@@ -362,7 +429,11 @@ export class SignerService {
             // console.log('Encrypted Message:', encryptedMessage);
 
             // Attempt to decrypt the message using nip04.decrypt
-            const decryptedMessage = await nip04.decrypt(privateKey, senderPublicKey, encryptedMessage);
+            const decryptedMessage = await nip04.decrypt(
+                privateKey,
+                senderPublicKey,
+                encryptedMessage
+            );
 
             // Check if the decrypted message is valid
             if (!decryptedMessage) {
@@ -376,10 +447,6 @@ export class SignerService {
         }
     }
 
-
-
-
-
     getUnsignedEvent(kind: number, tags: string[][], content: string) {
         const eventUnsigned: UnsignedEvent = {
             kind: kind,
@@ -387,48 +454,76 @@ export class SignerService {
             tags: tags,
             content: content,
             created_at: Math.floor(Date.now() / 1000),
-        }
-        return eventUnsigned
+        };
+        return eventUnsigned;
     }
 
     getSignedEvent(eventUnsigned: UnsignedEvent, privateKey: string): Event {
         const privateKeyBytes = hexToBytes(privateKey);
 
-        const signedEvent: Event = finalizeEvent(eventUnsigned, privateKeyBytes);
+        const signedEvent: Event = finalizeEvent(
+            eventUnsigned,
+            privateKeyBytes
+        );
 
         return signedEvent;
     }
 
+    getMuteList() {
+        return (localStorage.getItem('muteList') || '').split(',');
+    }
 
+    setMuteListFromTags(tags: string[][]): void {
+        let muteList: string[] = [];
+        tags.forEach((t) => {
+            muteList.push(t[1]);
+        });
+        this.setMuteList(muteList);
+    }
 
+    setMuteList(muteList: string[]) {
+        if (muteList.length === 0) {
+            localStorage.setItem('muteList', '');
+        } else {
+            let muteSet = Array.from(new Set(muteList));
+            localStorage.setItem(
+                'muteList',
+                muteSet.filter((s) => s).join(',')
+            );
+        }
+    }
 
     async signEventWithExtension(unsignedEvent: UnsignedEvent): Promise<Event> {
         const gt = globalThis as any;
         if (gt.nostr) {
-            const signedEvent = await gt.nostr.signEvent(unsignedEvent)
+            const signedEvent = await gt.nostr.signEvent(unsignedEvent);
             return signedEvent;
         } else {
-            throw new Error("Tried to sign event with extension but failed");
+            throw new Error('Tried to sign event with extension but failed');
         }
     }
 
-    async signDMWithExtension(pubkey: string, content: string): Promise<string> {
+    async signDMWithExtension(
+        pubkey: string,
+        content: string
+    ): Promise<string> {
         const gt = globalThis as any;
         if (gt.nostr && gt.nostr.nip04?.encrypt) {
-            return await gt.nostr.nip04.encrypt(pubkey, content)
+            return await gt.nostr.nip04.encrypt(pubkey, content);
         }
-        throw new Error("Failed to Sign with extension");
+        throw new Error('Failed to Sign with extension');
     }
 
     public async isUsingExtension(): Promise<boolean> {
         const globalContext = globalThis as any;
         if (globalContext.nostr && globalContext.nostr.getPublicKey) {
             try {
-                const secretKey = localStorage.getItem(this.localStorageSecretKeyName);
+                const secretKey = localStorage.getItem(
+                    this.localStorageSecretKeyName
+                );
                 return !secretKey;
-
             } catch (error) {
-                console.error("Failed to check Nostr extension:", error);
+                console.error('Failed to check Nostr extension:', error);
                 return false;
             }
         }
diff --git a/src/app/services/social.service.ts b/src/app/services/social.service.ts
index a9d0ed5..d56730a 100644
--- a/src/app/services/social.service.ts
+++ b/src/app/services/social.service.ts
@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { Filter, NostrEvent, UnsignedEvent, Event } from 'nostr-tools';
+import { Event, Filter, NostrEvent, UnsignedEvent } from 'nostr-tools';
+import { Observable, Subject } from 'rxjs';
 import { RelayService } from './relay.service';
 import { SignerService } from './signer.service';
-import { Subject, Observable } from 'rxjs';
 
 @Injectable({
     providedIn: 'root',
@@ -14,7 +14,7 @@ export class SocialService {
     constructor(
         private relayService: RelayService,
         private signerService: SignerService
-    ) { }
+    ) {}
 
     getFollowersObservable(): Observable<NostrEvent> {
         return this.followersSubject.asObservable();
@@ -95,7 +95,12 @@ export class SocialService {
         const newFollowingList = [...currentFollowing, pubkeyToFollow];
         this.setFollowingList(newFollowingList);
 
-        const unsignedEvent: UnsignedEvent = this.signerService.getUnsignedEvent(3, newFollowingList.map(f => ['p', f]), '');
+        const unsignedEvent: UnsignedEvent =
+            this.signerService.getUnsignedEvent(
+                3,
+                newFollowingList.map((f) => ['p', f]),
+                ''
+            );
 
         // Check if using Nostr extension
         const isUsingExtension = await this.signerService.isUsingExtension();
@@ -103,14 +108,18 @@ export class SocialService {
 
         if (isUsingExtension) {
             // Sign using Nostr extension
-            signedEvent = await this.signerService.signEventWithExtension(unsignedEvent);
+            signedEvent =
+                await this.signerService.signEventWithExtension(unsignedEvent);
         } else {
             // Sign using private key
             const secretKey = await this.signerService.getDecryptedSecretKey();
             if (!secretKey) {
                 throw new Error('Secret key is missing. Unable to follow.');
             }
-            signedEvent = this.signerService.getSignedEvent(unsignedEvent, secretKey);
+            signedEvent = this.signerService.getSignedEvent(
+                unsignedEvent,
+                secretKey
+            );
         }
 
         // Publish the signed follow event
@@ -128,10 +137,17 @@ export class SocialService {
         }
 
         // Remove the user from the following list
-        const updatedFollowingList = currentFollowing.filter((pubkey) => pubkey !== pubkeyToUnfollow);
+        const updatedFollowingList = currentFollowing.filter(
+            (pubkey) => pubkey !== pubkeyToUnfollow
+        );
         this.setFollowingList(updatedFollowingList);
 
-        const unsignedEvent: UnsignedEvent = this.signerService.getUnsignedEvent(3, updatedFollowingList.map(f => ['p', f]), '');
+        const unsignedEvent: UnsignedEvent =
+            this.signerService.getUnsignedEvent(
+                3,
+                updatedFollowingList.map((f) => ['p', f]),
+                ''
+            );
 
         // Check if using Nostr extension
         const isUsingExtension = await this.signerService.isUsingExtension();
@@ -139,14 +155,18 @@ export class SocialService {
 
         if (isUsingExtension) {
             // Sign using Nostr extension
-            signedEvent = await this.signerService.signEventWithExtension(unsignedEvent);
+            signedEvent =
+                await this.signerService.signEventWithExtension(unsignedEvent);
         } else {
             // Sign using private key
             const secretKey = await this.signerService.getDecryptedSecretKey();
             if (!secretKey) {
                 throw new Error('Secret key is missing. Unable to unfollow.');
             }
-            signedEvent = this.signerService.getSignedEvent(unsignedEvent, secretKey);
+            signedEvent = this.signerService.getSignedEvent(
+                unsignedEvent,
+                secretKey
+            );
         }
 
         // Publish the signed unfollow event
@@ -170,7 +190,6 @@ export class SocialService {
         return tags;
     }
 
-
     setFollowingListFromTags(tags: string[][]): void {
         const following: string[] = [];
         tags.forEach((t) => {
diff --git a/src/app/services/state.service.ts b/src/app/services/state.service.ts
index 72276d5..dd065fc 100644
--- a/src/app/services/state.service.ts
+++ b/src/app/services/state.service.ts
@@ -3,42 +3,44 @@ import { Project } from 'app/interface/project.interface';
 import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
-  providedIn: 'root',
+    providedIn: 'root',
 })
 export class StateService {
-  private projects: Project[] = [];
-  private projectsSubject = new BehaviorSubject<Project[]>([]);
+    private projects: Project[] = [];
+    private projectsSubject = new BehaviorSubject<Project[]>([]);
 
-  getProjectsObservable() {
-    return this.projectsSubject.asObservable();
-  }
-
-  setProjects(projects: Project[]): void {
-    this.projects = projects;
-    this.projectsSubject.next(this.projects);
-  }
-
-  getProjects(): Project[] {
-    return this.projects;
-  }
-
-  hasProjects(): boolean {
-    return this.projects.length > 0;
-  }
-
-  updateProject(project: Project): void {
-    const index = this.projects.findIndex(p => p.nostrPubKey === project.nostrPubKey);
-
-    if (index > -1) {
-      this.projects[index] = project;
-    } else {
-      this.projects.push(project);
+    getProjectsObservable() {
+        return this.projectsSubject.asObservable();
     }
 
-    this.projectsSubject.next(this.projects);
-  }
+    setProjects(projects: Project[]): void {
+        this.projects = projects;
+        this.projectsSubject.next(this.projects);
+    }
 
-  getProjectByPubKey(nostrPubKey: string): Project | undefined {
-    return this.projects.find(p => p.nostrPubKey === nostrPubKey);
-  }
+    getProjects(): Project[] {
+        return this.projects;
+    }
+
+    hasProjects(): boolean {
+        return this.projects.length > 0;
+    }
+
+    updateProject(project: Project): void {
+        const index = this.projects.findIndex(
+            (p) => p.nostrPubKey === project.nostrPubKey
+        );
+
+        if (index > -1) {
+            this.projects[index] = project;
+        } else {
+            this.projects.push(project);
+        }
+
+        this.projectsSubject.next(this.projects);
+    }
+
+    getProjectByPubKey(nostrPubKey: string): Project | undefined {
+        return this.projects.find((p) => p.nostrPubKey === nostrPubKey);
+    }
 }
diff --git a/src/app/services/update.service.ts b/src/app/services/update.service.ts
index c05f390..2158c44 100644
--- a/src/app/services/update.service.ts
+++ b/src/app/services/update.service.ts
@@ -12,7 +12,7 @@ export class NewVersionCheckerService {
 
     constructor(
         private swUpdate: SwUpdate,
-        private zone: NgZone,
+        private zone: NgZone
     ) {
         this.checkForUpdateOnLoad();
         this.checkForUpdateOnInterval();
@@ -29,22 +29,23 @@ export class NewVersionCheckerService {
         this.unsubscribeInterval();
 
         if (!this.swUpdate.isEnabled) {
-            console.log('Service worker updates are disabled.');
             return;
         }
 
         this.zone.runOutsideAngular(() => {
-            this.intervalSubscription = this.intervalSource.subscribe(async () => {
-                try {
-                    const updateAvailable = await this.swUpdate.checkForUpdate();
-                    console.log(updateAvailable ? 'A new version is available.' : 'Already on the latest version.');
-                    if (updateAvailable) {
-                        this.newVersionAvailableSubject.next(true);
+            this.intervalSubscription = this.intervalSource.subscribe(
+                async () => {
+                    try {
+                        const updateAvailable =
+                            await this.swUpdate.checkForUpdate();
+                        if (updateAvailable) {
+                            this.newVersionAvailableSubject.next(true);
+                        }
+                    } catch (error) {
+                        console.error('Failed to check for updates:', error);
                     }
-                } catch (error) {
-                    console.error('Failed to check for updates:', error);
                 }
-            });
+            );
         });
     }
 
@@ -52,32 +53,29 @@ export class NewVersionCheckerService {
         this.unsubscribeNewVersion();
 
         if (!this.swUpdate.isEnabled) {
-            console.log('Service worker updates are disabled for this app.');
             return;
         }
 
-        this.newVersionSubscription = this.swUpdate.versionUpdates.subscribe((evt: VersionEvent) => {
-            console.log('New version update event:', evt);
-            switch (evt.type) {
-                case 'VERSION_DETECTED':
-                    console.log(`Downloading new app version: ${evt.version.hash}`);
-                    break;
-                case 'VERSION_READY':
-                    console.log(`New app version is ready for use: ${evt.latestVersion.hash}`);
-                    this.newVersionAvailableSubject.next(true);
-                    break;
-                case 'VERSION_INSTALLATION_FAILED':
-                    console.error(`Failed to install app version '${evt.version.hash}': ${evt.error}`);
-                    break;
-                default:
-                    console.log('Unknown version event type:', evt.type);
+        this.newVersionSubscription = this.swUpdate.versionUpdates.subscribe(
+            (evt: VersionEvent) => {
+                switch (evt.type) {
+                    case 'VERSION_DETECTED':
+                        break;
+                    case 'VERSION_READY':
+                        this.newVersionAvailableSubject.next(true);
+                        break;
+                    case 'VERSION_INSTALLATION_FAILED':
+                        console.error(
+                            `Failed to install app version '${evt.version.hash}': ${evt.error}`
+                        );
+                        break;
+                    default:
+                    // console.log('Unknown version event type:', evt.type);
+                }
             }
-        });
-
-        console.log('Subscribed to new version updates.');
+        );
     }
 
-
     private unsubscribeInterval(): void {
         if (this.intervalSubscription) {
             this.intervalSubscription.unsubscribe();
diff --git a/src/app/shared/gif-dialog/gif-dialog.component.html b/src/app/shared/gif-dialog/gif-dialog.component.html
index 63a3ad5..414333a 100644
--- a/src/app/shared/gif-dialog/gif-dialog.component.html
+++ b/src/app/shared/gif-dialog/gif-dialog.component.html
@@ -1,18 +1,39 @@
 <div mat-dialog-content>
     <mat-form-field appearance="outline" class="full-width">
         <mat-label>Search GIF</mat-label>
-        <input matInput [(ngModel)]="gifSearch" placeholder="keyword..." (keyup.enter)="searchGif()">
+        <input
+            matInput
+            [(ngModel)]="gifSearch"
+            placeholder="keyword..."
+            (keyup.enter)="searchGif()"
+        />
 
-        <button class="ml-2 mr-2" mat-icon-button matSuffix (click)="searchGif()">
-            <mat-icon [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
+        <button
+            class="ml-2 mr-2"
+            mat-icon-button
+            matSuffix
+            (click)="searchGif()"
+        >
+            <mat-icon
+                [svgIcon]="'heroicons_outline:magnifying-glass'"
+            ></mat-icon>
         </button>
 
-        <mat-hint>Enter a keyword like "funny" or "cat" and hit search!</mat-hint>
+        <mat-hint
+            >Enter a keyword like "funny" or "cat" and hit search!</mat-hint
+        >
     </mat-form-field>
 
-    <div *ngIf="gifsFound.length > 0" class="results-container grid grid-cols-3 gap-4 mt-4">
-        <div *ngFor="let gif of gifsFound" (click)="selectGif(gif)" class="gif-preview w-full h-24 cursor-pointer">
-            <img [src]="gif" class="w-full h-full object-cover"/>
+    <div
+        *ngIf="gifsFound.length > 0"
+        class="results-container mt-4 grid grid-cols-3 gap-4"
+    >
+        <div
+            *ngFor="let gif of gifsFound"
+            (click)="selectGif(gif)"
+            class="gif-preview h-24 w-full cursor-pointer"
+        >
+            <img [src]="gif" class="h-full w-full object-cover" />
         </div>
     </div>
 </div>
diff --git a/src/app/shared/gif-dialog/gif-dialog.component.ts b/src/app/shared/gif-dialog/gif-dialog.component.ts
index a21b79f..306d45a 100644
--- a/src/app/shared/gif-dialog/gif-dialog.component.ts
+++ b/src/app/shared/gif-dialog/gif-dialog.component.ts
@@ -1,10 +1,19 @@
 import { CommonModule, NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject } from '@angular/core';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Inject,
+} from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOption } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { MatFormField, MatFormFieldControl, MatFormFieldModule, MatLabel } from '@angular/material/form-field';
+import {
+    MatFormField,
+    MatFormFieldModule,
+    MatLabel,
+} from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
@@ -44,32 +53,31 @@ import { GifService } from 'app/services/gif.service';
         MatInputModule,
         MatSelectModule,
     ],
-    styles: [`
-.full-width {
-  width: 100%;
-}
+    styles: [
+        `
+            .full-width {
+                width: 100%;
+            }
 
-.results-container {
-  max-height: 300px;
+            .results-container {
+                max-height: 300px;
 
-  overflow-y: auto;
-overflow-x:hidden;
-}
+                overflow-y: auto;
+                overflow-x: hidden;
+            }
 
-.gif-preview {
-  transition: transform 0.2s;
-}
+            .gif-preview {
+                transition: transform 0.2s;
+            }
 
-.gif-preview:hover {
-  transform: scale(1.1);
-}
-
-
-    `]
+            .gif-preview:hover {
+                transform: scale(1.1);
+            }
+        `,
+    ],
 })
 export class GifDialogComponent {
-
-    gifSearch: string = "";
+    gifSearch: string = '';
     gifsFound: string[] = [];
 
     constructor(
@@ -77,7 +85,7 @@ export class GifDialogComponent {
         public dialogRef: MatDialogRef<GifDialogComponent>,
         private cdr: ChangeDetectorRef,
         @Inject(MAT_DIALOG_DATA) public data: any
-    ) { }
+    ) {}
 
     searchGif() {
         if (!this.gifSearch || this.gifSearch.trim() === '') {
@@ -86,12 +94,19 @@ export class GifDialogComponent {
         }
 
         if (this.data.apiKey) {
-            this.gifService.getTopGifs(this.gifSearch, this.data.apiKey).subscribe(response => {
-                this.gifsFound = response.results.map(gif => gif.media[0].gif.url);
-                this.cdr.detectChanges();
-            }, error => {
-                console.error('Error fetching GIFs:', error);
-            });
+            this.gifService
+                .getTopGifs(this.gifSearch, this.data.apiKey)
+                .subscribe(
+                    (response) => {
+                        this.gifsFound = response.results.map(
+                            (gif) => gif.media[0].gif.url
+                        );
+                        this.cdr.detectChanges();
+                    },
+                    (error) => {
+                        console.error('Error fetching GIFs:', error);
+                    }
+                );
         } else {
             console.error('API key is missing.');
         }
diff --git a/src/app/shared/password-dialog/password-dialog.component.html b/src/app/shared/password-dialog/password-dialog.component.html
index 907cad9..be651f7 100644
--- a/src/app/shared/password-dialog/password-dialog.component.html
+++ b/src/app/shared/password-dialog/password-dialog.component.html
@@ -1,34 +1,39 @@
 <h1 mat-dialog-title>Enter Password</h1>
 <div mat-dialog-content>
-  <form [formGroup]="passwordForm">
-    <!-- Password Input -->
-    <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
-        <mat-label>Password</mat-label>
-        <mat-icon matPrefix>lock</mat-icon>
-        <input matInput [formControlName]="'password'" type="password" />
-        <mat-error *ngIf="passwordForm.get('password').hasError('required')">
-          Password is required
-        </mat-error>
-      </mat-form-field>
+    <form [formGroup]="passwordForm">
+        <!-- Password Input -->
+        <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
+            <mat-label>Password</mat-label>
+            <mat-icon matPrefix>lock</mat-icon>
+            <input matInput [formControlName]="'password'" type="password" />
+            <mat-error
+                *ngIf="passwordForm.get('password').hasError('required')"
+            >
+                Password is required
+            </mat-error>
+        </mat-form-field>
 
-
-    <!-- Duration Select -->
-    <mat-form-field class="w-full mt-5">
-        <mat-label>Duration</mat-label>
-        <mat-select formControlName="duration">
-          <mat-option value="0">0 Minute</mat-option>
-          <mat-option value="1">1 Minute</mat-option>
-          <mat-option value="5">5 Minutes</mat-option>
-          <mat-option value="10">10 Minutes</mat-option>
-          <mat-option value="60">1 Hour</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-  </form>
+        <!-- Duration Select -->
+        <mat-form-field class="mt-5 w-full">
+            <mat-label>Duration</mat-label>
+            <mat-select formControlName="duration">
+                <mat-option value="0">0 Minute</mat-option>
+                <mat-option value="1">1 Minute</mat-option>
+                <mat-option value="5">5 Minutes</mat-option>
+                <mat-option value="10">10 Minutes</mat-option>
+                <mat-option value="60">1 Hour</mat-option>
+            </mat-select>
+        </mat-form-field>
+    </form>
 </div>
 <div mat-dialog-actions>
-  <button mat-button (click)="onCancel()">Cancel</button>
-  <button mat-raised-button color="primary" [disabled]="passwordForm.invalid" (click)="onSubmit()">
-    Submit
-  </button>
+    <button mat-button (click)="onCancel()">Cancel</button>
+    <button
+        mat-raised-button
+        color="primary"
+        [disabled]="passwordForm.invalid"
+        (click)="onSubmit()"
+    >
+        Submit
+    </button>
 </div>
diff --git a/src/app/shared/password-dialog/password-dialog.component.ts b/src/app/shared/password-dialog/password-dialog.component.ts
index f3cb85f..0ca1e58 100644
--- a/src/app/shared/password-dialog/password-dialog.component.ts
+++ b/src/app/shared/password-dialog/password-dialog.component.ts
@@ -1,10 +1,20 @@
 import { CommonModule, NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+    FormBuilder,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOption } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { MatFormField, MatFormFieldControl, MatFormFieldModule, MatLabel } from '@angular/material/form-field';
+import {
+    MatFormField,
+    MatFormFieldModule,
+    MatLabel,
+} from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
@@ -38,17 +48,20 @@ import { SettingsSecurityComponent } from 'app/components/settings/security/secu
         MatFormField,
         ReactiveFormsModule,
         CommonModule,
-        MatSelectModule  ,
+        MatSelectModule,
         MatFormFieldModule,
         MatInputModule,
         MatSelectModule,
     ],
-    styles: [`
-    .full-width { width: 100%; }
-  `]
+    styles: [
+        `
+            .full-width {
+                width: 100%;
+            }
+        `,
+    ],
 })
 export class PasswordDialogComponent {
-
     passwordForm: FormGroup;
 
     constructor(
@@ -58,7 +71,7 @@ export class PasswordDialogComponent {
     ) {
         this.passwordForm = this.fb.group({
             password: ['', Validators.required],
-            duration: ['0', Validators.required]  // Default duration is 0 minute
+            duration: ['0', Validators.required], // Default duration is 0 minute
         });
     }
 
diff --git a/src/app/shared/pipes/ago.pipe.ts b/src/app/shared/pipes/ago.pipe.ts
index 005f788..384ad0e 100644
--- a/src/app/shared/pipes/ago.pipe.ts
+++ b/src/app/shared/pipes/ago.pipe.ts
@@ -1,16 +1,14 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import * as moment from 'moment';
 
-@Pipe({ name: 'ago', standalone: true  })
+@Pipe({ name: 'ago', standalone: true })
 export class AgoPipe implements PipeTransform {
+    transform(value: number): string {
+        if (value === 0) {
+            return '';
+        }
 
-   transform(value: number): string {
-
-      if (value === 0) {
-         return '';
-      }
-
-      const date = moment.unix(value);
-      return date.fromNow();
-   }
+        const date = moment.unix(value);
+        return date.fromNow();
+    }
 }
diff --git a/src/app/shared/pipes/checkmessage.pipe.ts b/src/app/shared/pipes/checkmessage.pipe.ts
index 488c55f..dc2ae50 100644
--- a/src/app/shared/pipes/checkmessage.pipe.ts
+++ b/src/app/shared/pipes/checkmessage.pipe.ts
@@ -1,50 +1,52 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'checkmessage', standalone: true
+    name: 'checkmessage',
+    standalone: true,
 })
 export class CheckmessagePipe implements PipeTransform {
+    transform(value: string): string {
+        const imageRegex = /\.(jpeg|jpg|gif|png|bmp|svg|webp|tiff)$/i;
+        const videoRegex = /\.(mp4|mov|avi|mkv|webm|flv|wmv|mpeg|3gp)$/i;
+        const audioRegex = /\.(mp3|wav|ogg|m4a|aac|flac)$/i;
+        const pdfRegex = /\.pdf$/i;
+        const youtubeRegex =
+            /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+        const vimeoRegex = /https?:\/\/(www\.)?vimeo.com\/(\d+)/;
+        const instagramRegex =
+            /https?:\/\/(www\.)?instagram.com\/p\/[a-zA-Z0-9_-]+/;
+        const twitterRegex =
+            /https?:\/\/(www\.)?twitter.com\/[a-zA-Z0-9_]+\/status\/[0-9]+/;
+        const urlRegex = /(https?:\/\/[^\s]+)/;
 
-  transform(value: string): string {
+        if (imageRegex.test(value)) {
+            return '🌄 image';
+        }
+        if (videoRegex.test(value)) {
+            return '🎬 video';
+        }
+        if (audioRegex.test(value)) {
+            return '🎵 audio';
+        }
+        if (pdfRegex.test(value)) {
+            return '📁 pdf';
+        }
+        if (youtubeRegex.test(value)) {
+            return '📽️ youtube';
+        }
+        if (vimeoRegex.test(value)) {
+            return '📽️ vimeo';
+        }
+        if (instagramRegex.test(value)) {
+            return '🔮 instagram';
+        }
+        if (twitterRegex.test(value)) {
+            return '🐦 twitter';
+        }
+        if (urlRegex.test(value)) {
+            return '🌐 url';
+        }
 
-    const imageRegex = /\.(jpeg|jpg|gif|png|bmp|svg|webp|tiff)$/i;
-    const videoRegex = /\.(mp4|mov|avi|mkv|webm|flv|wmv|mpeg|3gp)$/i;
-    const audioRegex = /\.(mp3|wav|ogg|m4a|aac|flac)$/i;
-    const pdfRegex = /\.pdf$/i;
-    const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
-    const vimeoRegex = /https?:\/\/(www\.)?vimeo.com\/(\d+)/;
-    const instagramRegex = /https?:\/\/(www\.)?instagram.com\/p\/[a-zA-Z0-9_-]+/;
-    const twitterRegex = /https?:\/\/(www\.)?twitter.com\/[a-zA-Z0-9_]+\/status\/[0-9]+/;
-    const urlRegex = /(https?:\/\/[^\s]+)/;
-
-    if (imageRegex.test(value)) {
-      return '🌄 image';
+        return value;
     }
-    if (videoRegex.test(value)) {
-      return '🎬 video';
-    }
-    if (audioRegex.test(value)) {
-      return '🎵 audio';
-    }
-    if (pdfRegex.test(value)) {
-      return '📁 pdf';
-    }
-    if (youtubeRegex.test(value)) {
-      return '📽️ youtube';
-    }
-    if (vimeoRegex.test(value)) {
-      return '📽️ vimeo';
-    }
-    if (instagramRegex.test(value)) {
-      return '🔮 instagram';
-    }
-    if (twitterRegex.test(value)) {
-      return '🐦 twitter';
-    }
-    if (urlRegex.test(value)) {
-      return '🌐 url';
-    }
-
-     return value;
-  }
 }
diff --git a/src/app/shared/pipes/safe-url.pipe.ts b/src/app/shared/pipes/safe-url.pipe.ts
index 0fcf90b..f5726c7 100644
--- a/src/app/shared/pipes/safe-url.pipe.ts
+++ b/src/app/shared/pipes/safe-url.pipe.ts
@@ -2,13 +2,13 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Pipe({
-  name: 'safeResourceUrl',
-  standalone: true,
+    name: 'safeResourceUrl',
+    standalone: true,
 })
 export class SafeUrlPipe implements PipeTransform {
-  constructor(private readonly sanitizer: DomSanitizer) {}
+    constructor(private readonly sanitizer: DomSanitizer) {}
 
-  public transform(url: string): SafeResourceUrl {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
-  }
+    public transform(url: string): SafeResourceUrl {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
 }
diff --git a/src/app/shared/pipes/size.pipe.ts b/src/app/shared/pipes/size.pipe.ts
index 03c47fc..d184f30 100644
--- a/src/app/shared/pipes/size.pipe.ts
+++ b/src/app/shared/pipes/size.pipe.ts
@@ -1,23 +1,23 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'size',
-  standalone: true,
+    name: 'size',
+    standalone: true,
 })
 export class SizePipe implements PipeTransform {
-  transform(value: any, args?: any): any {
-    if (value == null) {
-      return '';
+    transform(value: any, args?: any): any {
+        if (value == null) {
+            return '';
+        }
+
+        if (value === 0) {
+            return '0 Bytes';
+        }
+
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+        const i = Math.floor(Math.log(value) / Math.log(k));
+
+        return parseFloat((value / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }
-
-    if (value === 0) {
-      return '0 Bytes';
-    }
-
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
-    const i = Math.floor(Math.log(value) / Math.log(k));
-
-    return parseFloat((value / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  }
 }
diff --git a/src/app/shared/pipes/stripHtml.ts b/src/app/shared/pipes/stripHtml.ts
index 9e4745b..3f8bbfb 100644
--- a/src/app/shared/pipes/stripHtml.ts
+++ b/src/app/shared/pipes/stripHtml.ts
@@ -1,31 +1,31 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'stripHtml',
-  standalone: true,
+    name: 'stripHtml',
+    standalone: true,
 })
 export class StripHtmlPipe implements PipeTransform {
-  transform(value: string, limit: number = 200): string {
-    if (!value) {
-      return '...';
+    transform(value: string, limit: number = 200): string {
+        if (!value) {
+            return '...';
+        }
+
+        // Strip HTML tags and replace them with a space
+        let strippedText = value.replace(/<\/?[^>]+(>|$)/g, ' ');
+
+        // Replace &nbsp; with a space
+        strippedText = strippedText.replace(/&nbsp;/g, ' ');
+
+        // Remove extra spaces
+        const normalizedText = strippedText.replace(/\s\s+/g, ' ').trim();
+
+        // Limit the text to the specified number of characters
+        let result = normalizedText;
+        if (normalizedText.length > limit) {
+            result = normalizedText.substring(0, limit);
+        }
+
+        // Always add "..." at the end
+        return result.trim() + '...';
     }
-
-    // Strip HTML tags and replace them with a space
-    let strippedText = value.replace(/<\/?[^>]+(>|$)/g, ' ');
-
-    // Replace &nbsp; with a space
-    strippedText = strippedText.replace(/&nbsp;/g, ' ');
-
-    // Remove extra spaces
-    const normalizedText = strippedText.replace(/\s\s+/g, ' ').trim();
-
-    // Limit the text to the specified number of characters
-    let result = normalizedText;
-    if (normalizedText.length > limit) {
-      result = normalizedText.substring(0, limit);
-    }
-
-    // Always add "..." at the end
-    return result.trim() + '...';
-  }
 }
diff --git a/src/app/shared/pipes/timestamp.pipe.ts b/src/app/shared/pipes/timestamp.pipe.ts
index d2975d9..85a8a0a 100644
--- a/src/app/shared/pipes/timestamp.pipe.ts
+++ b/src/app/shared/pipes/timestamp.pipe.ts
@@ -1,16 +1,14 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import * as moment from 'moment';
 
-
 @Pipe({ name: 'timestamp' })
 export class TimestampPipe implements PipeTransform {
-   transform(value: number): any {
+    transform(value: number): any {
+        if (value === 0) {
+            return '';
+        }
 
-      if (value === 0) {
-         return '';
-      }
-
-      const date = moment.unix(value);
-      return date.toDate();
-   }
+        const date = moment.unix(value);
+        return date.toDate();
+    }
 }
diff --git a/src/app/shared/pipes/truncate.pipe.ts b/src/app/shared/pipes/truncate.pipe.ts
index 4ada2d6..5956ac6 100644
--- a/src/app/shared/pipes/truncate.pipe.ts
+++ b/src/app/shared/pipes/truncate.pipe.ts
@@ -1,13 +1,12 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'truncate'
+    name: 'truncate',
 })
 export class TruncatePipe implements PipeTransform {
-
-  transform(value: string, limit: number): string {
-    if (!value) return '';
-    if (value.length <= limit) return value;
-    return value.substring(0, limit) + '...';
-  }
+    transform(value: string, limit: number): string {
+        if (!value) return '';
+        if (value.length <= limit) return value;
+        return value.substring(0, limit) + '...';
+    }
 }
diff --git a/src/app/utils.ts b/src/app/shared/utils.ts
similarity index 61%
rename from src/app/utils.ts
rename to src/app/shared/utils.ts
index faebed9..4f2f801 100644
--- a/src/app/utils.ts
+++ b/src/app/shared/utils.ts
@@ -1,27 +1,22 @@
- 
+ import { User } from 'app/types/user';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { Post } from './types/post';
-import { User } from './types/user';
 dayjs.extend(relativeTime);
 
-
-export function range (start: number, end: number) {
-    return [...Array(1+end-start).keys()].map(v => start+v)
+export function range(start: number, end: number) {
+    return [...Array(1 + end - start).keys()].map((v) => start + v);
 }
 
 export function ellipsis(value: string): string {
-    // truncates the middle of the string
-    if (value.length < 40) return value;
+     if (value.length < 40) return value;
     let third: number = value.length / 8;
     let finalThird: number = value.length - third;
-    return value.substring(0, third) + ":" + value.substring(finalThird)
+    return value.substring(0, third) + ':' + value.substring(finalThird);
 }
 
-
 export function humantime(value: number): string {
-    let date = new Date(value*1000)
-    return dayjs(date).fromNow()
+    let date = new Date(value * 1000);
+    return dayjs(date).fromNow();
 }
 
 export class Paginator {
@@ -31,13 +26,17 @@ export class Paginator {
     since: number = 0;
     baseTimeDiff: number;
     originalBaseTimeDiff: number;
-    constructor(until: number = 0, since: number = 0, baseTimeDiff: number = 15) {
+    constructor(
+        until: number = 0,
+        since: number = 0,
+        baseTimeDiff: number = 15
+    ) {
         this.until = until;
         this.setDefaultUntil();
         this.baseTimeDiff = baseTimeDiff;
         this.originalBaseTimeDiff = this.baseTimeDiff;
         if (since === 0) {
-            this.setDefaultSince()
+            this.setDefaultSince();
         } else {
             this.setDefaultSince(since);
         }
@@ -45,20 +44,7 @@ export class Paginator {
         this.previousUntil = until;
     }
 
-    incrementFilterTimes(posts: Post[]): void {
-        const oldestPost = posts.at(-1);
-        if (oldestPost) {
-            this.revertBackToOriginalBaseTimeDiff();
-            this.setUntil(oldestPost.createdAt);
-            this.setSince(oldestPost.createdAt);
-        } else {
-            // posts must be empty so increment more
-            this.updateBaseTimeToFindPosts();
-            this.setDefaultUntil();
-            // expand time until we find something
-            this.setDefaultSince();
-        }
-    }
+
 
     incrementUserTimes(users: User[]): void {
         const oldestPost = users.at(-1);
@@ -67,10 +53,10 @@ export class Paginator {
             this.setUntil(oldestPost.createdAt);
             this.setSince(oldestPost.createdAt);
         } else {
-            // posts must be empty so increment more
+
             this.updateBaseTimeToFindPosts();
             this.setDefaultUntil();
-            // expand time until we find something
+
             this.setDefaultSince();
         }
     }
@@ -88,16 +74,16 @@ export class Paginator {
     }
 
     revertBackToOriginalBaseTimeDiff() {
-        // revert back once we have found posts
+
         this.baseTimeDiff = this.originalBaseTimeDiff;
     }
 
     getSinceAsDate(): Date {
-        return new Date(this.since*1000);
+        return new Date(this.since * 1000);
     }
 
     getUntilAsDate(): Date {
-        return new Date(this.until*1000);
+        return new Date(this.until * 1000);
     }
 
     getSinceFromNow(): string {
@@ -111,8 +97,11 @@ export class Paginator {
     }
 
     printTimes(): void {
-        const diff = this.getUntilAsDate().getTime() - this.getSinceAsDate().getTime();
-        console.log(`Until: ${this.getUntilFromNow()} | Since: ${this.getSinceFromNow()}`);
+        const diff =
+            this.getUntilAsDate().getTime() - this.getSinceAsDate().getTime();
+        console.log(
+            `Until: ${this.getUntilFromNow()} | Since: ${this.getSinceFromNow()}`
+        );
         console.log(`Diff: ${diff}`);
     }
 
@@ -123,9 +112,13 @@ export class Paginator {
     }
 
     private setDefaultSince(addedMinutes: number = 0): void {
-        // Math.floor(Date.now() / 1000)
+
         let now = new Date();
-        const sinceDate = Math.floor(now.setMinutes(now.getMinutes() - this.baseTimeDiff - addedMinutes) / 1000);
+        const sinceDate = Math.floor(
+            now.setMinutes(
+                now.getMinutes() - this.baseTimeDiff - addedMinutes
+            ) / 1000
+        );
         this.since = sinceDate;
     }
 
@@ -134,12 +127,16 @@ export class Paginator {
     }
 
     private getNewSince(createdAt: number, addedMinutes: number = 0): number {
-        const now = new Date(createdAt*1000);
-        return Math.floor(now.setMinutes(now.getMinutes() - this.baseTimeDiff - addedMinutes) / 1000);
+        const now = new Date(createdAt * 1000);
+        return Math.floor(
+            now.setMinutes(
+                now.getMinutes() - this.baseTimeDiff - addedMinutes
+            ) / 1000
+        );
     }
 
     private setUntil(createdAt: number): void {
-        this.previousUntil = this.until - (2 * 1000) // minus two minutes;
+        this.previousUntil = this.until - 2 * 1000;
         this.until = createdAt;
     }
 
diff --git a/src/app/types/NewEvent.ts b/src/app/types/NewEvent.ts
new file mode 100644
index 0000000..199cc33
--- /dev/null
+++ b/src/app/types/NewEvent.ts
@@ -0,0 +1,79 @@
+import { NostrEvent } from "nostr-tools";
+import { NIP10Result } from "nostr-tools/nip10";
+
+export class NewEvent {
+    nostrEvent: NostrEvent;
+    kind: number;
+    content: string;
+    pubkey: string;
+    npub: string;
+    noteId: string;
+    createdAt: number;
+    date: Date;
+    fromNow: string;
+    username: string = '';
+    picture: string = '/images/avatars/avatar-placeholder.png';
+    replyCount: number = 0;
+    likeCount: number = 0;
+    zapCount: number = 0;
+    repostCount: number = 0;
+    likedByMe: boolean = false;
+    replies: NewEvent[] = [];
+    likers: string[] = [];
+    reposters: string[] = [];
+    zappers: string[] = [];
+    relatedEventIds: string[] = [];
+    rootEventId: string = '';
+    replyToEventId: string = '';
+    mentions: string[] = [];
+    hashtags: string[] = [];
+    repostedByMe: boolean = false;
+    nip10Result: NIP10Result;
+    tags: string[][] = [];
+    id: any;
+    isAReply: boolean = false;
+
+    constructor(
+        id: any,
+        kind: number,
+        pubkey: string,
+        content: string,
+        noteId: string,
+        createdAt: number,
+        tags: string[][] = []
+    ) {
+        this.kind = kind;
+        this.pubkey = pubkey;
+        this.content = content;
+        this.noteId = noteId;
+        this.createdAt = createdAt;
+        this.date = new Date(this.createdAt * 1000);
+        this.fromNow = this.calculateTimeFromNow(this.date);
+        this.tags = tags;
+        this.id = id;
+    }
+
+    calculateTimeFromNow(date: Date): string {
+        const now = new Date();
+        const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+        if (diffInSeconds < 60) {
+            return `${diffInSeconds} seconds ago`;
+        } else if (diffInSeconds < 3600) {
+            const minutes = Math.floor(diffInSeconds / 60);
+            return `${minutes} minutes ago`;
+        } else if (diffInSeconds < 86400) {
+            const hours = Math.floor(diffInSeconds / 3600);
+            return `${hours} hours ago`;
+        } else if (diffInSeconds < 2592000) {
+            const days = Math.floor(diffInSeconds / 86400);
+            return `${days} days ago`;
+        } else if (diffInSeconds < 31536000) {
+            const months = Math.floor(diffInSeconds / 2592000);
+            return `${months} months ago`;
+        } else {
+            const years = Math.floor(diffInSeconds / 31536000);
+            return `${years} years ago`;
+        }
+    }
+}
diff --git a/src/app/types/gif.ts b/src/app/types/gif.ts
index 265dfed..6987477 100644
--- a/src/app/types/gif.ts
+++ b/src/app/types/gif.ts
@@ -1,4 +1,3 @@
-
 export interface Gif {
     preview: string;
     size: number;
@@ -12,11 +11,11 @@ export interface TenorGif {
 
 export interface TenorGifResponse {
     bg_color: string;
-    composite?: string
+    composite?: string;
     content_description: string;
     content_rating: string;
     created: number;
-    flags? : string[];
+    flags?: string[];
     h1_title: string;
     hasaudio: boolean;
     hascaption: boolean;
diff --git a/src/app/types/nostr.ts b/src/app/types/nostr.ts
index d1a11e4..70a3488 100644
--- a/src/app/types/nostr.ts
+++ b/src/app/types/nostr.ts
@@ -1,15 +1,14 @@
-import { UnsignedEvent, Event } from "nostr-tools"
+import { Event, UnsignedEvent } from 'nostr-tools';
 
 export interface NostrWindow {
-    getPublicKey: () => Promise<string>
-    signEvent: (event: UnsignedEvent) => Promise<Event>
+    getPublicKey: () => Promise<string>;
+    signEvent: (event: UnsignedEvent) => Promise<Event>;
     nip04?: {
-        encrypt?: (pubkey: string, plaintext: string) => Promise<string>
-        decrypt?: (pubkey: string, ciphertext: string) => Promise<string>
-    }
+        encrypt?: (pubkey: string, plaintext: string) => Promise<string>;
+        decrypt?: (pubkey: string, ciphertext: string) => Promise<string>;
+    };
 }
 
-
 export interface NIP05Names {
     [key: string]: string;
 }
diff --git a/src/app/types/post.ts b/src/app/types/post.ts
index 7d7bb67..c90a20c 100644
--- a/src/app/types/post.ts
+++ b/src/app/types/post.ts
@@ -1,9 +1,9 @@
+import { decode } from '@gandlaf21/bolt11-decode';
+import { MetadataService } from 'app/services/metadata.service';
+import { humantime } from 'app/shared/utils';
+import dayjs from 'dayjs';
+import { Event, nip10, nip19 } from 'nostr-tools';
 import { NIP10Result } from 'nostr-tools/nip10';
-import { Event, nip19, nip10 } from 'nostr-tools';
-import { decode } from "@gandlaf21/bolt11-decode";
- import dayjs from 'dayjs';
-import * as relativeTime from 'dayjs/plugin/relativeTime';
-import { humantime } from 'app/utils';
 
 export interface TextWrap {
     text: string;
@@ -51,21 +51,28 @@ export class Zap {
     date: Date;
     sig: string;
     tags: string[][];
-    username: string = "";
-    picture: string = "";
+    username: string = '';
+    picture: string = '';
     receiverPubKey: string;
     receiverNpub: string;
     receiverEventId: string;
-    senderPubkey: string = "";
-    senderNpub: string = "";
-    senderMessage: string = "";
+    senderPubkey: string = '';
+    senderNpub: string = '';
+    senderMessage: string = '';
     bolt11: string;
     preImage: string;
     description: Event | null;
-    fromNow: string = "";
-    content: string = "";
+    fromNow: string = '';
+    content: string = '';
     satAmount: number;
-    constructor(id: string, kind: number, pubkey: string, created_at: number, sig: string, tags: string[][]) {
+    constructor(
+        id: string,
+        kind: number,
+        pubkey: string,
+        created_at: number,
+        sig: string,
+        tags: string[][]
+    ) {
         this.id = id;
         this.kind = kind;
         this.walletPubkey = pubkey;
@@ -83,59 +90,61 @@ export class Zap {
         this.description = this.getDescription();
         this.setSender();
         this.createdAt = created_at;
-        this.date = new Date(this.createdAt*1000);
+        this.date = new Date(this.createdAt * 1000);
         this.setFromNow();
         this.setContent();
     }
 
     getUserPubkey() {
-        const p: string = "p";
+        const p: string = 'p';
         for (let tag of this.tags) {
             if (tag[0] === p) {
                 return tag[1];
             }
         }
-        return "";
+        return '';
     }
 
     getEventId() {
-        const e: string = "e";
+        const e: string = 'e';
         for (let tag of this.tags) {
             if (tag[0] === e) {
                 return tag[1];
             }
         }
-        return "";
+        return '';
     }
 
     getBolt11() {
-        const bolt: string = "bolt11";
+        const bolt: string = 'bolt11';
         for (let tag of this.tags) {
             if (tag[0] === bolt) {
                 return tag[1];
             }
         }
-        return "";
+        return '';
     }
 
     getPreImage() {
-        const pi: string = "preimage";
+        const pi: string = 'preimage';
         for (let tag of this.tags) {
             if (tag[0] === pi) {
                 return tag[1];
             }
         }
-        return "";
+        return '';
     }
 
     getDescription(): Event | null {
-        const desc: string = "description";
+        const desc: string = 'description';
         for (let tag of this.tags) {
             if (tag[0] === desc) {
                 try {
                     return JSON.parse(tag[1]) as Event;
                 } catch (e) {
-                    console.log(`couldn't parse zap receipt description: ${tag}`);
+                    console.log(
+                        `couldn't parse zap receipt description: ${tag}`
+                    );
                     return null;
                 }
             }
@@ -147,8 +156,8 @@ export class Zap {
         if (this.bolt11) {
             const decodedInvoice = decode(this.bolt11);
             for (let s of decodedInvoice.sections) {
-                if (s.name === "amount") {
-                    return Number(s.value)/1000;
+                if (s.name === 'amount') {
+                    return Number(s.value) / 1000;
                 }
             }
         }
@@ -157,20 +166,32 @@ export class Zap {
 
     setContent() {
         if (this.description) {
-            let content = "<div class='zap-generated-content'>"
-            content = content + `<div><strong><span style="color: orange; font-size: 20px;">${this.satAmount} sats </span>ZAP!</strong><span class="zap-time"> ${humantime(this.createdAt)}</span></div>`;
-            content = content + `<p><strong> To: </strong><span>nostr:${this.receiverNpub}</span></p><p><strong> From: </strong><span>nostr:${this.senderNpub}</span></p>`;
+            let content = "<div class='zap-generated-content'>";
+            content =
+                content +
+                `<div><strong><span style="color: orange; font-size: 20px;">${this.satAmount} sats </span>ZAP!</strong><span class="zap-time"> ${humantime(this.createdAt)}</span></div>`;
+            content =
+                content +
+                `<p><strong> To: </strong><span>nostr:${this.receiverNpub}</span></p><p><strong> From: </strong><span>nostr:${this.senderNpub}</span></p>`;
             if (this.receiverEventId) {
-                content = content + `<p><strong>Note: </strong>nostr:${nip19.neventEncode({id: this.receiverEventId})}</p>`;
+                content =
+                    content +
+                    `<p><strong>Note: </strong>nostr:${nip19.neventEncode({ id: this.receiverEventId })}</p>`;
             }
             if (this.senderMessage) {
-                content = content + `<p><strong>Message: </strong>${this.senderMessage}</p>`;
+                content =
+                    content +
+                    `<p><strong>Message: </strong>${this.senderMessage}</p>`;
             }
-            content = content + "</div>";
+            content = content + '</div>';
             let nip10Result = nip10.parse(this.description);
-            this.content = new Content(this.kind, content, nip10Result).getParsedContent()
+            this.content = new Content(
+                this.kind,
+                content,
+                nip10Result
+            ).getParsedContent();
         } else {
-            this.content = "<p>Anon Zap</p>";
+            this.content = '<p>Anon Zap</p>';
         }
     }
 
@@ -183,7 +204,7 @@ export class Zap {
     }
 
     setFromNow(): void {
-        this.fromNow = dayjs(this.date).fromNow()
+        this.fromNow = dayjs(this.date).fromNow();
     }
 
     setUsername(pubkey: string): void {
@@ -191,13 +212,16 @@ export class Zap {
     }
 
     setPicture(pubkey: string): void {
-        this.picture = localStorage.getItem(`${pubkey}_img`) || "https://axiumradonmitigations.com/wp-content/uploads/2015/01/icon-user-default.png";
+        this.picture =
+            localStorage.getItem(`${pubkey}_img`) ||
+            '/images/avatars/avatar-placeholder.png';
     }
 }
 
 export function isYoutubeVideo(url: string): boolean {
-    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/ig;
-    return (url.match(p)) ? true : false;
+    var p =
+        /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/gi;
+    return url.match(p) ? true : false;
 }
 
 export class Content {
@@ -205,11 +229,16 @@ export class Content {
     content: string;
     nip10Result: NIP10Result;
     addHash: boolean;
-    constructor(kind: number, content: string, nip10Result: NIP10Result, addHash: boolean = true) {
+    constructor(
+        kind: number,
+        content: string,
+        nip10Result: NIP10Result,
+        addHash: boolean = true
+    ) {
         this.kind = kind;
         this.content = content;
         this.nip10Result = nip10Result;
-        this.addHash = addHash
+        this.addHash = addHash;
     }
 
     getParsedContent(ignoreNIP10: boolean = false): string {
@@ -239,7 +268,7 @@ export class Content {
     }
 
     hasEventPointer(content: string): boolean {
-        if (content.includes("nostr:")) {
+        if (content.includes('nostr:')) {
             return true;
         }
         return false;
@@ -249,19 +278,21 @@ export class Content {
         if (value.length < 40) return value;
         let section: number = value.length / 8;
         let finalSection: number = value.length - section;
-        return value.substring(0, section) + ":" +  value.substring(finalSection)
+        return (
+            value.substring(0, section) + ':' + value.substring(finalSection)
+        );
     }
 
     reposted(): string {
         if (this.nip10Result.root) {
             return `nostr:${this.getNevent(this.nip10Result.root)}`;
         }
-        return "<repost but malformed>";
+        return '<repost but malformed>';
     }
 
     wrapTextInSpan(textWrap: TextWrap): string {
         if (textWrap.cssClass === undefined) {
-            textWrap.cssClass = "hashtag"
+            textWrap.cssClass = 'hashtag';
         }
         if (textWrap.npub) {
             return `<span class="${textWrap.cssClass}" data-npub=${textWrap.npub}>${textWrap.text}</span>`;
@@ -271,49 +302,59 @@ export class Content {
             return `<span class="${textWrap.cssClass}" data-hashtag=${textWrap.hashtag}>${textWrap.text}</span>`;
         } else if (this.addHash && textWrap.addLink) {
             // this fixes an issue in user about not redirecting properly
-            textWrap.addLink = textWrap.addLink.replace('href="', 'href="/#/')
-            return `<a class="${textWrap.cssClass}" ${textWrap.addLink}>${textWrap.text}</a>`
+            textWrap.addLink = textWrap.addLink.replace('href="', 'href="/#/');
+            return `<a class="${textWrap.cssClass}" ${textWrap.addLink}>${textWrap.text}</a>`;
         }
-        return `<span class="${textWrap.cssClass}">${textWrap.text}</span>`
+        return `<span class="${textWrap.cssClass}">${textWrap.text}</span>`;
     }
 
     getNpub(pubkey: string): string {
-        if (pubkey.startsWith("npub")) {
+        if (pubkey.startsWith('npub')) {
             return pubkey;
         }
         return nip19.npubEncode(pubkey);
     }
 
     getUsername(pubkey: string): string {
-        if (pubkey.startsWith("npub")) {
-            pubkey = nip19.decode(pubkey).data.toString()
+        if (pubkey.startsWith('npub')) {
+            pubkey = nip19.decode(pubkey).data.toString();
         }
-        return `@${(localStorage.getItem(`${pubkey}`) || this.getNpub(pubkey))}`
+        return `@${localStorage.getItem(`${pubkey}`) || this.getNpub(pubkey)}`;
     }
 
     nip08Replace(content: string): string {
-        let userTags: string[] = content.match(/#\[\d+\]/gm) || []
+        let userTags: string[] = content.match(/#\[\d+\]/gm) || [];
         // is this condition right?
         if (this.nip10Result.profiles.length !== userTags.length) {
             return content;
         }
         for (let i in userTags) {
-            let userPubkey = this.nip10Result.profiles[i].pubkey
+            let userPubkey = this.nip10Result.profiles[i].pubkey;
             let npub = this.getNpub(userPubkey);
             let username = this.getUsername(userPubkey);
-            let textWrap: TextWrap = {text: username, addLink: `href="/users/${npub}"`}
-            content = content.replace(userTags[i], this.wrapTextInSpan(textWrap))
+            let textWrap: TextWrap = {
+                text: username,
+                addLink: `href="/users/${npub}"`,
+            };
+            content = content.replace(
+                userTags[i],
+                this.wrapTextInSpan(textWrap)
+            );
         }
-        return content
+        return content;
     }
 
     parseLightningInvoice(content: string): string {
-        let invoices: string[] = content.match(/(lightning:|lnbc)[a-z0-9]+/gm) || []
+        let invoices: string[] =
+            content.match(/(lightning:|lnbc)[a-z0-9]+/gm) || [];
         for (let invoice of invoices) {
             try {
-                content = content.replace(invoice, this.getReplacementInvoiceHtml(invoice));
+                content = content.replace(
+                    invoice,
+                    this.getReplacementInvoiceHtml(invoice)
+                );
             } catch (e) {
-                console.log("failed to decode lightning invoice");
+                console.log('failed to decode lightning invoice');
             }
         }
         return content;
@@ -323,67 +364,80 @@ export class Content {
         if (invoice) {
             const decodedInvoice = decode(invoice);
             for (let s of decodedInvoice.sections) {
-                if (s.name === "amount") {
-                    return Number(s.value)/1000;
+                if (s.name === 'amount') {
+                    return Number(s.value) / 1000;
                 }
             }
         }
-        return "";
+        return '';
     }
 
     getReplacementInvoiceHtml(invoice: string) {
         const amount = this.getInvoiceAmount(invoice);
-        const r = `<div class="lightning-invoice"><span class="lightning-title">Lightning Invoice: ${amount} sats</span><mat-divider></mat-divider><p>${invoice}<br><br><button class="button-17" role="button">pay</button></p></div>`
+        const r = `<div class="lightning-invoice"><span class="lightning-title">Lightning Invoice: ${amount} sats</span><mat-divider></mat-divider><p>${invoice}<br><br><button class="button-17" role="button">pay</button></p></div>`;
         return r;
     }
 
     hashtagContent(content: string): string {
         let hashtagRegex = /#\w+\S/gm;
-        return content.replace(hashtagRegex, function(tag) {
-            let textWrap: TextWrap = {text: tag, cssClass: "hashtag", hashtag: `${tag.substring(1)}`}
+        return content.replace(hashtagRegex, function (tag) {
+            let textWrap: TextWrap = {
+                text: tag,
+                cssClass: 'hashtag',
+                hashtag: `${tag.substring(1)}`,
+            };
             return `<span class="${textWrap.cssClass}" data-hashtag=${textWrap.hashtag}>${textWrap.text}</span>`;
         });
     }
 
     cashtagContent(content: string): string {
         let cashtagRegex = /\$\w+\S/gm;
-        return content.replace(cashtagRegex, function(tag) {
-            let textWrap: TextWrap = {text: tag, cssClass: "hashtag", hashtag: `${tag.substring(1)}`}
+        return content.replace(cashtagRegex, function (tag) {
+            let textWrap: TextWrap = {
+                text: tag,
+                cssClass: 'hashtag',
+                hashtag: `${tag.substring(1)}`,
+            };
             return `<span class="${textWrap.cssClass}" data-hashtag=${textWrap.hashtag}>${textWrap.text}</span>`;
         });
     }
 
     styleUsername(content: string): string {
-        let usernameRegex = /@\w+/gm
-        return content.replace(usernameRegex, function(name) {
-            let textWrap: TextWrap = {text: name, cssClass: "hashtag"}
-            return `<a class="${textWrap.cssClass}" ${textWrap.addLink}>${textWrap.text}</a>`
+        let usernameRegex = /@\w+/gm;
+        return content.replace(usernameRegex, function (name) {
+            let textWrap: TextWrap = { text: name, cssClass: 'hashtag' };
+            return `<a class="${textWrap.cssClass}" ${textWrap.addLink}>${textWrap.text}</a>`;
         });
     }
 
     linkify(content: string): string {
         // TODO: could be improved
-        let urlRegex =/(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
-        return content.replace(urlRegex, function(url) {
+        let urlRegex =
+            /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
+        return content.replace(urlRegex, function (url) {
             // improve this?
-            if (url.toLowerCase().endsWith(".png") ||
-                url.toLowerCase().endsWith(".jpg") ||
-                url.toLowerCase().endsWith(".jpeg") ||
-                url.toLowerCase().endsWith(".webp") ||
-                url.toLowerCase().endsWith(".gif") ||
-                url.toLowerCase().endsWith(".gifv")
+            if (
+                url.toLowerCase().endsWith('.png') ||
+                url.toLowerCase().endsWith('.jpg') ||
+                url.toLowerCase().endsWith('.jpeg') ||
+                url.toLowerCase().endsWith('.webp') ||
+                url.toLowerCase().endsWith('.gif') ||
+                url.toLowerCase().endsWith('.gifv')
             ) {
-                return `<p class='post-image'><img src="${url}" /></p>`
+                return `<p class='post-image'><img src="${url}" /></p>`;
             }
-            if (url.toLowerCase().endsWith("mp4") || url.toLowerCase().endsWith("mov")) {
+            if (
+                url.toLowerCase().endsWith('mp4') ||
+                url.toLowerCase().endsWith('mov')
+            ) {
                 return `<p class='post-video'><video controls><source src="${url}#t=0.1" type="video/mp4"></video></p>`;
             }
             if (isYoutubeVideo(url)) {
                 // kinda hacky but works
-                if (url.includes("youtu.be")) {
-                    url = url.replace("youtu.be/", "youtube.com/watch?v=")
+                if (url.includes('youtu.be')) {
+                    url = url.replace('youtu.be/', 'youtube.com/watch?v=');
                 }
-                url = url.replace("watch?v=", "embed/")
+                url = url.replace('watch?v=', 'embed/');
                 return `<p><iframe width="100%" height="350px" src="${url}"></iframe></p>`;
             }
             return `<p><a href="${url}" target="_blank">${url}</a></p>`;
@@ -392,12 +446,13 @@ export class Content {
 
     encodeNoteAsEvent(note: string): string {
         let decodedNote = nip19.decode(note).data.toString();
-        let eventP: nip19.EventPointer = {id: decodedNote}
+        let eventP: nip19.EventPointer = { id: decodedNote };
         return nip19.neventEncode(eventP);
     }
 
     npubFromNProfile(nprofile: string): string {
-        const decodedNProfile: nip19.ProfilePointer = nip19.decode(nprofile).data as nip19.ProfilePointer;
+        const decodedNProfile: nip19.ProfilePointer = nip19.decode(nprofile)
+            .data as nip19.ProfilePointer;
         return nip19.npubEncode(decodedNProfile.pubkey);
     }
 
@@ -405,40 +460,66 @@ export class Content {
         if (!this.hasEventPointer(content)) {
             return content;
         }
-        let matches = content.match(/nostr:[a-z0-9]+/gm) || []
+        let matches = content.match(/nostr:[a-z0-9]+/gm) || [];
         for (let m in matches) {
-            let match = matches[m]
+            let match = matches[m];
             try {
-                if (match.startsWith("nostr:npub")) {
-                    let npub = match.substring(6)
-                    let username = this.getUsername(npub)
-                    let textWrap: TextWrap = {text: this.ellipsis(username), npub: npub, cssClass: "user-at"}
-                    let htmlSpan = this.wrapTextInSpan(textWrap)
+                if (match.startsWith('nostr:npub')) {
+                    let npub = match.substring(6);
+                    let username = this.getUsername(npub);
+                    let textWrap: TextWrap = {
+                        text: this.ellipsis(username),
+                        npub: npub,
+                        cssClass: 'user-at',
+                    };
+                    let htmlSpan = this.wrapTextInSpan(textWrap);
                     content = content.replace(match, htmlSpan);
                 }
-                if (match.startsWith("nostr:nevent")) {
-                    let nevent = match.substring(6)
-                    let textWrap: TextWrap = {text: this.ellipsis(nevent), nevent: nevent}
-                    content = content.replace(match, this.wrapTextInSpan(textWrap));
+                if (match.startsWith('nostr:nevent')) {
+                    let nevent = match.substring(6);
+                    let textWrap: TextWrap = {
+                        text: this.ellipsis(nevent),
+                        nevent: nevent,
+                    };
+                    content = content.replace(
+                        match,
+                        this.wrapTextInSpan(textWrap)
+                    );
                 }
-                if (match.startsWith("nostr:note")) {
+                if (match.startsWith('nostr:note')) {
                     let note = match.substring(6);
-                    let textWrap: TextWrap = {text: this.ellipsis(note), nevent: this.encodeNoteAsEvent(note)}
-                    content = content.replace(match, this.wrapTextInSpan(textWrap));
+                    let textWrap: TextWrap = {
+                        text: this.ellipsis(note),
+                        nevent: this.encodeNoteAsEvent(note),
+                    };
+                    content = content.replace(
+                        match,
+                        this.wrapTextInSpan(textWrap)
+                    );
                 }
-                if (match.startsWith("nostr:nprofile")) {
+                if (match.startsWith('nostr:nprofile')) {
                     const nprofile = match.substring(6);
                     const npub = this.npubFromNProfile(nprofile);
-                    let textWrap: TextWrap = {text: this.ellipsis(npub), npub: npub, cssClass: "user-at"}
-                    content = content.replace(match, this.wrapTextInSpan(textWrap));
+                    let textWrap: TextWrap = {
+                        text: this.ellipsis(npub),
+                        npub: npub,
+                        cssClass: 'user-at',
+                    };
+                    content = content.replace(
+                        match,
+                        this.wrapTextInSpan(textWrap)
+                    );
                 }
-                if (match.startsWith("nostr:naddr")) {
+                if (match.startsWith('nostr:naddr')) {
                     // these are editable posts i think means long form
                     // so we will link to habla.news for now
                     // https://habla.news/a/naddr1qqxnzdesxg6rzdp4xu6nzwpnqgsf03c2gsmx5ef4c9zmxvlew04gdh7u94afnknp33qvv3c94kvwxgsrqsqqqa280a30ar
                     const naddr = match.substring(6);
                     //let textWrap: TextWrap = {text: this.ellipsis(naddr), nevent: this.encodeNAddrAsEvent(naddr)}
-                    content = content.replace(naddr, `https://habla.news/a/${naddr}`)
+                    content = content.replace(
+                        naddr,
+                        `https://habla.news/a/${naddr}`
+                    );
                     content = this.linkify(content);
                 }
             } catch (e) {
@@ -449,8 +530,6 @@ export class Content {
     }
 }
 
-
-
 export class Post {
     kind: number;
     content: string;
@@ -460,9 +539,9 @@ export class Post {
     createdAt: number;
     nip10Result: NIP10Result;
     date: Date;
-    fromNow: string = "";
-    username: string = "";
-    picture: string = "";
+    fromNow: string = '';
+    username: string = '';
+    picture: string = '';
     replyingTo: string[] = [];
     mentions: string[] = [];
     nostrNoteId: string;
@@ -472,36 +551,72 @@ export class Post {
     isAReply: boolean = false;
     repostingPubkey: string;
     likedByMe: boolean = false;
-    constructor(kind: number, pubkey: string, content: string, noteId: string, createdAt: number, nip10Result: NIP10Result, repostingPubkey: string) {
+    likers: any;
+    shareCount: any;
+    commentCount: any;
+    comments: any;
+    id: any;
+
+    constructor(
+        kind: number,
+        pubkey: string,
+        content: string,
+        noteId: string,
+        createdAt: number,
+        nip10Result: NIP10Result,
+        repostingPubkey: string,
+        private metadataService: MetadataService // Inject MetadataService
+    ) {
         this.kind = kind;
         this.pubkey = pubkey;
         this.npub = nip19.npubEncode(this.pubkey);
-        this.noteId = noteId
+        this.noteId = noteId;
         this.nip10Result = nip10Result;
         this.createdAt = createdAt;
-        this.date = new Date(this.createdAt*1000);
-        this.setFromNow()
-        this.setUsername(this.pubkey);
-        this.setPicture(this.pubkey);
-        this.content = new Content(kind, content, nip10Result).getParsedContent();
+        this.date = new Date(this.createdAt * 1000);
+        this.setFromNow();
+        this.content = new Content(
+            kind,
+            content,
+            nip10Result
+        ).getParsedContent();
         this.nostrNoteId = nip19.noteEncode(this.noteId);
-        this.nostrEventId = nip19.neventEncode({id: this.noteId});
+        this.nostrEventId = nip19.neventEncode({ id: this.noteId });
         this.replyCount = 0;
         this.likeCount = 0;
         this.setIsAReply();
         this.repostingPubkey = repostingPubkey;
+
+        // Fetch username and picture using the MetadataService
+        this.setUsernameAndPicture(pubkey);
     }
 
     getAllTags(): string[][] {
-        return [["e", this.noteId], ["p", this.pubkey]]
+        return [
+            ['e', this.noteId],
+            ['p', this.pubkey],
+        ];
     }
 
-    setUsername(pubkey: string): void {
-        this.username = localStorage.getItem(`${pubkey}_name`) || this.npub;
-    }
-
-    setPicture(pubkey: string): void {
-        this.picture = localStorage.getItem(`${pubkey}_img`) || "https://axiumradonmitigations.com/wp-content/uploads/2015/01/icon-user-default.png";
+    // Fetch metadata for the username and picture
+    async setUsernameAndPicture(pubkey: string): Promise<void> {
+        try {
+            const metadata =
+                await this.metadataService.fetchMetadataWithCache(pubkey);
+            if (metadata) {
+                this.username = metadata.name || this.npub;
+                this.picture =
+                    metadata.picture ||
+                    '/images/avatars/avatar-placeholder.png';
+            } else {
+                this.username = this.npub;
+                this.picture = '/images/avatars/avatar-placeholder.png';
+            }
+        } catch (error) {
+            console.error('Error fetching user metadata:', error);
+            this.username = this.npub; // Default to npub if there's an error
+            this.picture = '/images/avatars/avatar-placeholder.png'; // Default to a placeholder image
+        }
     }
 
     setReplyCount(count: number): void {
@@ -513,11 +628,11 @@ export class Post {
     }
 
     setFromNow(): void {
-        this.fromNow = dayjs(this.date).fromNow()
+        this.fromNow = dayjs(this.date).fromNow();
     }
 
     setReplyingTo(): void {
-        //this.replyingTo = this.nip10Result.profiles;
+        // Logic to set replying to information based on metadata
     }
 
     setPostLikedByMe(val: boolean): void {
diff --git a/src/app/types/user.ts b/src/app/types/user.ts
index e58bbf6..13902ee 100644
--- a/src/app/types/user.ts
+++ b/src/app/types/user.ts
@@ -1,5 +1,5 @@
-import { nip19 } from 'nostr-tools';
 import { Content } from 'app/types/post';
+import { nip19 } from 'nostr-tools';
 
 // kind 0 content - nostr
 export interface Kind0Content {
@@ -35,11 +35,10 @@ export interface DBUser {
 }
 
 export interface SearchUser {
-    pubkey: string,
-    picture: string
+    pubkey: string;
+    picture: string;
 }
 
-
 export class BaseUser {
     pubkey: string;
     name: string;
@@ -49,7 +48,6 @@ export class BaseUser {
     }
 }
 
-
 export function dbUserToUser(dbUser: DBUser): User {
     const kind0Content: Kind0Content = {
         name: dbUser.name,
@@ -61,62 +59,79 @@ export function dbUserToUser(dbUser: DBUser): User {
         banner: dbUser.banner,
         lud06: dbUser.lud06,
         lud16: dbUser.lud16,
-        nip05: dbUser.nip05
-    }
-    return new User(kind0Content, Number(dbUser.createdAt), dbUser.pubkey, dbUser.following);
+        nip05: dbUser.nip05,
+    };
+    return new User(
+        kind0Content,
+        Number(dbUser.createdAt),
+        dbUser.pubkey,
+        dbUser.following
+    );
 }
 
 /*
     Preprocesses a kind0 message into a User class to be nicely accessible
 */
 export class User {
-    name: string = "";
-    username: string = "";
-    displayName: string = "";
-    website: string = "";
-    about: string = "";
+    name: string = '';
+    username: string = '';
+    displayName: string = '';
+    website: string = '';
+    about: string = '';
     aboutHTML: string;
-    picture: string = "";
-    banner: string = "";
-    lud06: string = "";
-    lud16: string = "";
-    nip05: string = "";
+    picture: string = '';
+    banner: string = '';
+    lud06: string = '';
+    lud16: string = '';
+    nip05: string = '';
     pubkey: string;
     npub: string;
     createdAt: number;
     apiKey: string;
     following: boolean = false;
-    constructor(kind0: Kind0Content, createdAt: number, pubkey: string, following?: boolean) {
+    constructor(
+        kind0: Kind0Content,
+        createdAt: number,
+        pubkey: string,
+        following?: boolean
+    ) {
         this.pubkey = pubkey;
         this.npub = nip19.npubEncode(this.pubkey);
-        this.name = kind0.name || "";
-        this.username = kind0.username || "";
-        this.displayName = kind0.displayName || this.name || this.username || this.npub;
-        this.website = this.getClickableWebsite(kind0.website || "");
+        this.name = kind0.name || '';
+        this.username = kind0.username || '';
+        this.displayName =
+            kind0.displayName || this.name || this.username || this.npub;
+        this.website = this.getClickableWebsite(kind0.website || '');
         const fake = {
             reply: undefined,
             root: undefined,
             mentions: [],
-            profiles: []
-        }
-        this.about = kind0.about || "";
-        this.aboutHTML = new Content(1, kind0.about || "", fake, true).getParsedContent();
-        this.picture = kind0.picture || "https://axiumradonmitigations.com/wp-content/uploads/2015/01/icon-user-default.png";
-        this.banner = kind0.banner || "";
-        this.lud06 = kind0.lud06 || "";
-        this.lud16 = kind0.lud16 || "";
-        this.nip05 = kind0.nip05 || "";
+            profiles: [],
+        };
+        this.about = kind0.about || '';
+        this.aboutHTML = new Content(
+            1,
+            kind0.about || '',
+            fake,
+            true
+        ).getParsedContent();
+        this.picture =
+            kind0.picture || '/images/avatars/avatar-placeholder.png';
+        this.banner = kind0.banner || '';
+        this.lud06 = kind0.lud06 || '';
+        this.lud16 = kind0.lud16 || '';
+        this.nip05 = kind0.nip05 || '';
         this.createdAt = createdAt;
-        this.cachePubkeyDisplayName()
-        this.apiKey = "LIVDSRZULELA" // TODO;
+        this.cachePubkeyDisplayName();
+        this.apiKey = 'LIVDSRZULELA'; // TODO;
         if (following) {
             this.setFollowing(true);
         }
     }
 
     getClickableWebsite(link: string) {
-        if (link === "") return link;
-        if (link.startsWith("http://") || link.startsWith("https://")) {
+        if (link === '') return link;
+        if (link.startsWith('http://') || link.startsWith('https://')) {
             return link;
         }
         return `http://${link}`;
@@ -131,6 +146,6 @@ export class User {
     }
 
     setFollowing(following: boolean) {
-        this.following = following
+        this.following = following;
     }
 }
diff --git a/src/app/types/webln.ts b/src/app/types/webln.ts
index 26c57f4..c2dcc2b 100644
--- a/src/app/types/webln.ts
+++ b/src/app/types/webln.ts
@@ -2,8 +2,8 @@ interface SendPaymentResponse {
     paymentHash?: string;
     preimage: string;
     route?: {
-      total_amt: number;
-      total_fees: number;
+        total_amt: number;
+        total_fees: number;
     };
 }
 
@@ -21,9 +21,9 @@ interface RequestInvoiceResponse {
 
 interface GetInfoResponse {
     node: {
-      alias: string;
-      pubkey: string;
-      color?: string;
+        alias: string;
+        pubkey: string;
+        color?: string;
     };
 }
 
@@ -51,4 +51,4 @@ export interface WebLN {
 //     timestamp: number;
 //     preimage?: string;
 //     state: WalletInvoiceState;
-//   }
\ No newline at end of file
+//   }
diff --git a/src/index.html b/src/index.html
index eea07e0..97d48c5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,48 +1,60 @@
 <!doctype html>
 <html lang="en">
+    <head>
+        <title>Angor Hub</title>
+        <meta charset="utf-8" />
+        <meta
+            name="description"
+            content="Angor Hub is a Nostr client that is customized around the Angor protocol, a decentralized crowdfunding platform."
+        />
+        <meta
+            name="keywords"
+            content="Angor, Bitcoin, Nostr, decentralized crowdfunding, crypto projects, Bitcoin crowdfunding, Angor protocol, Nostr client, blockchain funding"
+        />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+        />
 
-<head>
-    <title>Angor Hub</title>
-    <meta charset="utf-8" />
-    <meta name="description" content="Angor Hub is a Nostr client that is customized around the Angor protocol, a decentralized crowdfunding platform." />
-    <meta name="keywords" content="Angor, Bitcoin, Nostr, decentralized crowdfunding, crypto projects, Bitcoin crowdfunding, Angor protocol, Nostr client, blockchain funding" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+        <base href="/" />
 
-    <base href="/" />
+        <!-- Favicon -->
+        <link rel="icon" type="image/png" href="favicon-16x16.png" />
+        <link rel="icon" type="image/png" href="favicon-32x32.png" />
 
-    <!-- Favicon -->
-    <link rel="icon" type="image/png" href="favicon-16x16.png" />
-    <link rel="icon" type="image/png" href="favicon-32x32.png" />
+        <!-- Fonts -->
+        <link href="fonts/inter/inter.css" rel="stylesheet" />
+        <link href="https://fonts.gstatic.com" rel="preconnect" />
 
-    <!-- Fonts -->
-    <link href="fonts/inter/inter.css" rel="stylesheet" />
-    <link href="https://fonts.gstatic.com" rel="preconnect" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap"
+            rel="stylesheet"
+        />
 
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap"
-        rel="stylesheet" />
+        <!-- Icon fonts -->
+        <link
+            href="https://fonts.googleapis.com/icon?family=Material+Icons"
+            rel="stylesheet"
+        />
 
-    <!-- Icon fonts -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+        <!-- Splash screen styles -->
+        <link href="styles/splash-screen.css" rel="stylesheet" />
 
-    <!-- Splash screen styles -->
-    <link href="styles/splash-screen.css" rel="stylesheet" />
+        <link rel="manifest" href="manifest.webmanifest" />
+    </head>
 
-    <link rel="manifest" href="manifest.webmanifest">
-</head>
-
-<body>
-    <!-- Splash screen -->
-    <angor-splash-screen>
-        <img src="images/logo/logo.svg" alt="Angor logo" />
-        <div class="spinner">
-            <div class="bounce1"></div>
-            <div class="bounce2"></div>
-            <div class="bounce3"></div>
-        </div>
-    </angor-splash-screen>
-
-    <!-- App root -->
-    <app-root></app-root>
-</body>
+    <body>
+        <!-- Splash screen -->
+        <angor-splash-screen>
+            <img src="images/logo/logo.svg" alt="Angor logo" />
+            <div class="spinner">
+                <div class="bounce1"></div>
+                <div class="bounce2"></div>
+                <div class="bounce3"></div>
+            </div>
+        </angor-splash-screen>
 
+        <!-- App root -->
+        <app-root></app-root>
+    </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index 17447a5..c2fda5c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+    console.error(err)
+);
diff --git a/src/styles/emoji.scss b/src/styles/emoji.scss
index 2269340..09ade9b 100644
--- a/src/styles/emoji.scss
+++ b/src/styles/emoji.scss
@@ -1,110 +1,114 @@
 .emoji-mart,
 .emoji-mart * {
-  box-sizing: border-box;
-  line-height: 1.15;
+    box-sizing: border-box;
+    line-height: 1.15;
 }
 
 .emoji-mart {
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
-  font-size: 16px;
-  display: inline-block;
-  color: #222427;
-  border: 1px solid #d9d9d9;
-  border-radius: 15px;
-  background: #fff;
+    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
+    font-size: 16px;
+    display: inline-block;
+    color: #222427;
+    border: 1px solid #d9d9d9;
+    border-radius: 15px;
+    background: #fff;
 }
 
 .emoji-mart .emoji-mart-emoji {
-  padding: 6px;
+    padding: 6px;
 }
 
 .emoji-mart-bar {
-  border: 0 solid #d9d9d9;
+    border: 0 solid #d9d9d9;
 }
 .emoji-mart-bar:first-child {
-  border-bottom-width: 1px;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+    border-bottom-width: 1px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
 }
 .emoji-mart-bar:last-child {
-  border-top-width: 1px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+    border-top-width: 1px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
 }
 
 .emoji-mart-anchors {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0 6px;
-  line-height: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 6px;
+    line-height: 0;
 }
 
 .emoji-mart-anchor {
-  position: relative;
-  display: block;
-  flex: 1 1 auto;
-  color: #858585;
-  text-align: center;
-  padding: 12px 4px;
-  overflow: hidden;
-  transition: color .1s ease-out;
-  margin: 0;
-  box-shadow: none;
-  background: none;
-  border: none;
+    position: relative;
+    display: block;
+    flex: 1 1 auto;
+    color: #858585;
+    text-align: center;
+    padding: 12px 4px;
+    overflow: hidden;
+    transition: color 0.1s ease-out;
+    margin: 0;
+    box-shadow: none;
+    background: none;
+    border: none;
+}
+.emoji-mart-anchor:focus {
+    outline: 0;
 }
-.emoji-mart-anchor:focus { outline: 0 }
 .emoji-mart-anchor:hover,
 .emoji-mart-anchor:focus,
 .emoji-mart-anchor-selected {
-  color: #464646;
+    color: #464646;
 }
 
 .emoji-mart-anchor-selected .emoji-mart-anchor-bar {
-  bottom: 0;
+    bottom: 0;
 }
 
 .emoji-mart-anchor-bar {
-  position: absolute;
-  bottom: -3px; left: 0;
-  width: 100%; height: 3px;
-  background-color: #464646;
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background-color: #464646;
 }
 
 .emoji-mart-anchors i {
-  display: inline-block;
-  width: 100%;
-  max-width: 22px;
+    display: inline-block;
+    width: 100%;
+    max-width: 22px;
 }
 
 .emoji-mart-anchors svg,
 .emoji-mart-anchors img {
-  fill: currentColor;
-  height: 18px;
+    fill: currentColor;
+    height: 18px;
 }
 
 .emoji-mart-scroll {
-  overflow-y: scroll;
-  height: 270px;
-  padding: 0 6px 6px 6px;
-  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
+    overflow-y: scroll;
+    height: 270px;
+    padding: 0 6px 6px 6px;
+    will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
 }
 
 .emoji-mart-search {
-  margin-top: 6px;
-  padding: 0 6px;
-  position: relative;
+    margin-top: 6px;
+    padding: 0 6px;
+    position: relative;
 }
 
 .emoji-mart-search input {
-  font-size: 16px;
-  display: block;
-  width: 100%;
-  padding: 5px 25px 6px 10px;
-  border-radius: 5px;
-  border: 1px solid #d9d9d9;
-  outline: 0;
+    font-size: 16px;
+    display: block;
+    width: 100%;
+    padding: 5px 25px 6px 10px;
+    border-radius: 5px;
+    border: 1px solid #d9d9d9;
+    outline: 0;
 }
 
 .emoji-mart-search input,
@@ -112,340 +116,372 @@
 .emoji-mart-search input::-webkit-search-cancel-button,
 .emoji-mart-search input::-webkit-search-results-button,
 .emoji-mart-search input::-webkit-search-results-decoration {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 .emoji-mart-search-icon {
-  position: absolute;
-  top: 6px;
-  right: 11px;
-  z-index: 2;
-  padding: 2px 5px 1px;
-  border: none;
-  background: none;
+    position: absolute;
+    top: 6px;
+    right: 11px;
+    z-index: 2;
+    padding: 2px 5px 1px;
+    border: none;
+    background: none;
 }
 
 .emoji-mart-category .emoji-mart-emoji span {
-  z-index: 1;
-  position: relative;
-  text-align: center;
-  cursor: default;
+    z-index: 1;
+    position: relative;
+    text-align: center;
+    cursor: default;
 }
 
 .emoji-mart-category .emoji-mart-emoji:hover:before {
-  z-index: 0;
-  content: "";
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  background-color: #f4f4f4;
-  border-radius: 100%;
+    z-index: 0;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #f4f4f4;
+    border-radius: 100%;
 }
 
 .emoji-mart-category-label {
-  z-index: 2;
-  position: relative;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
+    z-index: 2;
+    position: relative;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
 }
 
 .emoji-mart-category-label span {
-  display: block;
-  width: 100%;
-  font-weight: 500;
-  padding: 5px 6px;
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, .95);
+    display: block;
+    width: 100%;
+    font-weight: 500;
+    padding: 5px 6px;
+    background-color: #fff;
+    background-color: rgba(255, 255, 255, 0.95);
 }
 
 .emoji-mart-category-list {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 .emoji-mart-category-list li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: inline-block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: inline-block;
 }
 
 .emoji-mart-emoji {
-  position: relative;
-  display: inline-block;
-  font-size: 0;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  box-shadow: none;
+    position: relative;
+    display: inline-block;
+    font-size: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    box-shadow: none;
 }
 
 .emoji-mart-emoji-native {
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
+    font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI',
+        'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji',
+        'Android Emoji';
 }
 
 .emoji-mart-no-results {
-  font-size: 14px;
-  text-align: center;
-  padding-top: 70px;
-  color: #858585;
+    font-size: 14px;
+    text-align: center;
+    padding-top: 70px;
+    color: #858585;
 }
 .emoji-mart-no-results .emoji-mart-category-label {
-  display: none;
+    display: none;
 }
 .emoji-mart-no-results .emoji-mart-no-results-label {
-  margin-top: .2em;
+    margin-top: 0.2em;
 }
 .emoji-mart-no-results .emoji-mart-emoji:hover:before {
-  content: none;
+    content: none;
 }
 
 .emoji-mart-preview {
-  position: relative;
-  height: 70px;
+    position: relative;
+    height: 70px;
 }
 
 .emoji-mart-preview-emoji,
 .emoji-mart-preview-data,
 .emoji-mart-preview-skins {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
 .emoji-mart-preview-emoji {
-  left: 12px;
+    left: 12px;
 }
 
 .emoji-mart-preview-data {
-  left: 68px; right: 12px;
-  word-break: break-all;
+    left: 68px;
+    right: 12px;
+    word-break: break-all;
 }
 
 .emoji-mart-preview-skins {
-  right: 30px;
-  text-align: right;
+    right: 30px;
+    text-align: right;
 }
 
 .emoji-mart-preview-skins.custom {
-  right: 10px;
-  text-align: right;
+    right: 10px;
+    text-align: right;
 }
 
 .emoji-mart-preview-name {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 .emoji-mart-preview-shortname {
-  font-size: 12px;
-  color: #888;
+    font-size: 12px;
+    color: #888;
 }
 .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
 .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
 .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
-  margin-left: .5em;
+    margin-left: 0.5em;
 }
 
 .emoji-mart-preview-emoticon {
-  font-size: 11px;
-  color: #bbb;
+    font-size: 11px;
+    color: #bbb;
 }
 
 .emoji-mart-title span {
-  display: inline-block;
-  vertical-align: middle;
+    display: inline-block;
+    vertical-align: middle;
 }
 
 .emoji-mart-title .emoji-mart-emoji {
-  padding: 0;
+    padding: 0;
 }
 
 .emoji-mart-title-label {
-  color: #999A9C;
-  font-size: 26px;
-  font-weight: 300;
+    color: #999a9c;
+    font-size: 26px;
+    font-weight: 300;
 }
 
 .emoji-mart-skin-swatches {
-  font-size: 0;
-  padding: 2px 0;
-  border: 1px solid #d9d9d9;
-  border-radius: 15px;
-  background-color: #fff;
+    font-size: 0;
+    padding: 2px 0;
+    border: 1px solid #d9d9d9;
+    border-radius: 15px;
+    background-color: #fff;
 }
 
 .emoji-mart-skin-swatches.custom {
-  font-size: 0;
-  border: none;
-  background-color: #fff;
+    font-size: 0;
+    border: none;
+    background-color: #fff;
 }
 
 .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
-  width: 16px;
-  padding: 0 2px;
+    width: 16px;
+    padding: 0 2px;
 }
 
 .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after {
-  opacity: .75;
+    opacity: 0.75;
 }
 
 .emoji-mart-skin-swatch {
-  display: inline-block;
-  width: 0;
-  vertical-align: middle;
-  transition-property: width, padding;
-  transition-duration: .125s;
-  transition-timing-function: ease-out;
+    display: inline-block;
+    width: 0;
+    vertical-align: middle;
+    transition-property: width, padding;
+    transition-duration: 0.125s;
+    transition-timing-function: ease-out;
 }
 
-.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
-.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
-.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
-.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
-.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
-.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }
+.emoji-mart-skin-swatch:nth-child(1) {
+    transition-delay: 0s;
+}
+.emoji-mart-skin-swatch:nth-child(2) {
+    transition-delay: 0.03s;
+}
+.emoji-mart-skin-swatch:nth-child(3) {
+    transition-delay: 0.06s;
+}
+.emoji-mart-skin-swatch:nth-child(4) {
+    transition-delay: 0.09s;
+}
+.emoji-mart-skin-swatch:nth-child(5) {
+    transition-delay: 0.12s;
+}
+.emoji-mart-skin-swatch:nth-child(6) {
+    transition-delay: 0.15s;
+}
 
 .emoji-mart-skin-swatch.selected {
-  position: relative;
-  width: 16px;
-  padding: 0 2px;
+    position: relative;
+    width: 16px;
+    padding: 0 2px;
 }
 
 .emoji-mart-skin-swatch.selected:after {
-  content: "";
-  position: absolute;
-  top: 50%; left: 50%;
-  width: 4px; height: 4px;
-  margin: -2px 0 0 -2px;
-  background-color: #fff;
-  border-radius: 100%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity .2s ease-out;
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 4px;
+    height: 4px;
+    margin: -2px 0 0 -2px;
+    background-color: #fff;
+    border-radius: 100%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
 }
 
 .emoji-mart-skin-swatch.custom {
-  display: inline-block;
-  width: 0;
-  height: 38px;
-  overflow: hidden;
-  vertical-align: middle;
-  transition-property: width, height;
-  transition-duration: .125s;
-  transition-timing-function: ease-out;
-  cursor: default;
+    display: inline-block;
+    width: 0;
+    height: 38px;
+    overflow: hidden;
+    vertical-align: middle;
+    transition-property: width, height;
+    transition-duration: 0.125s;
+    transition-timing-function: ease-out;
+    cursor: default;
 }
 
 .emoji-mart-skin-swatch.custom.selected {
-  position: relative;
-  width: 36px;
-  height: 38px;
-  padding: 0 2px 0 0;
+    position: relative;
+    width: 36px;
+    height: 38px;
+    padding: 0 2px 0 0;
 }
 
 .emoji-mart-skin-swatch.custom.selected:after {
-  content: "";
-  width: 0;
-  height: 0;
+    content: '';
+    width: 0;
+    height: 0;
 }
 
 .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
-  background-color: #f4f4f4;
-  border-radius: 10%;
+    background-color: #f4f4f4;
+    border-radius: 10%;
 }
 
 .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
-  width: 36px;
-  height: 38px;
-  padding: 0 2px 0 0;
+    width: 36px;
+    height: 38px;
+    padding: 0 2px 0 0;
 }
 
-.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after {
-  opacity: .75;
+.emoji-mart-skin-swatches.custom.opened
+    .emoji-mart-skin-swatch.custom.selected:after {
+    opacity: 0.75;
 }
 
 .emoji-mart-skin-text.opened {
-  display: inline-block;
-  vertical-align: middle;
-  text-align: left;
-  color: #888;
-  font-size: 11px;
-  padding: 5px 2px;
-  width: 95px;
-  height: 40px;
-  border-radius: 10%;
-  background-color: #fff;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: left;
+    color: #888;
+    font-size: 11px;
+    padding: 5px 2px;
+    width: 95px;
+    height: 40px;
+    border-radius: 10%;
+    background-color: #fff;
 }
 
 .emoji-mart-skin {
-  display: inline-block;
-  width: 100%;
-  padding-top: 100%;
-  max-width: 12px;
-  border-radius: 100%;
+    display: inline-block;
+    width: 100%;
+    padding-top: 100%;
+    max-width: 12px;
+    border-radius: 100%;
 }
 
-.emoji-mart-skin-tone-1 { background-color: #ffc93a }
-.emoji-mart-skin-tone-2 { background-color: #fadcbc }
-.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
-.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
-.emoji-mart-skin-tone-5 { background-color: #9b643d }
-.emoji-mart-skin-tone-6 { background-color: #594539 }
+.emoji-mart-skin-tone-1 {
+    background-color: #ffc93a;
+}
+.emoji-mart-skin-tone-2 {
+    background-color: #fadcbc;
+}
+.emoji-mart-skin-tone-3 {
+    background-color: #e0bb95;
+}
+.emoji-mart-skin-tone-4 {
+    background-color: #bf8f68;
+}
+.emoji-mart-skin-tone-5 {
+    background-color: #9b643d;
+}
+.emoji-mart-skin-tone-6 {
+    background-color: #594539;
+}
 
 .emoji-mart-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
 }
 
 /*
  * Dark mode styles
  */
 
- .emoji-mart-dark {
+.emoji-mart-dark {
     color: #e5eef0; /* gray-50 */
     border-color: #083b46; /* gray-500 */
     border-width: 2px;
     border-radius: 15px;
     background-color: #022229; /* gray-900 */
-  }
+}
 
-  .emoji-mart-dark .emoji-mart-bar {
+.emoji-mart-dark .emoji-mart-bar {
     border-color: #083b46; /* gray-500 */
-  }
+}
 
-  .emoji-mart-dark .emoji-mart-search input {
+.emoji-mart-dark .emoji-mart-search input {
     color: #e5eef0; /* gray-50 */
     border-color: #083b46; /* gray-500 */
     background-color: #07343e; /* gray-600 */
-  }
-  .emoji-mart-dark .emoji-mart-search-icon svg {
+}
+.emoji-mart-dark .emoji-mart-search-icon svg {
     fill: #e5eef0; /* gray-50 */
-  }
+}
 
-  .emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
+.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
     background-color: #052b33; /* gray-700 */
-  }
+}
 
-  .emoji-mart-dark .emoji-mart-category-label span {
+.emoji-mart-dark .emoji-mart-category-label span {
     background-color: #032128; /* gray-800 */
     color: #e5eef0; /* gray-50 */
-  }
+}
 
-  .emoji-mart-dark .emoji-mart-skin-swatches {
+.emoji-mart-dark .emoji-mart-skin-swatches {
     border-color: #083b46; /* gray-500 */
     background-color: #022229; /* gray-900 */
-  }
+}
 
-  .emoji-mart-dark .emoji-mart-anchor:hover,
-  .emoji-mart-dark .emoji-mart-anchor:focus,
-  .emoji-mart-dark .emoji-mart-anchor-selected {
+.emoji-mart-dark .emoji-mart-anchor:hover,
+.emoji-mart-dark .emoji-mart-anchor:focus,
+.emoji-mart-dark .emoji-mart-anchor-selected {
     color: #9bbac3; /* gray-200 */
-  }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 39d0353..ee19881 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -11,8 +11,11 @@ body {
     position: absolute;
     bottom: 60px;
     left: 0;
-    z-index: 1000;
-  }
-  input, textarea, select, button {
+    z-index: 100000;
+}
+input,
+textarea,
+select,
+button {
     font-size: 16px;
 }
diff --git a/src/webpack.config.js b/src/webpack.config.js
index b07179e..2c0d19c 100644
--- a/src/webpack.config.js
+++ b/src/webpack.config.js
@@ -1,21 +1,24 @@
 const webpack = require('webpack');
 
 module.exports = {
-  resolve: {
-    fallback: {
-      crypto: require.resolve('crypto-browserify'),
-      stream: require.resolve('stream-browserify'),
-      // url: require.resolve('url/'),
-      url: false,
+    resolve: {
+        fallback: {
+            crypto: require.resolve('crypto-browserify'),
+            stream: require.resolve('stream-browserify'),
+            // url: require.resolve('url/'),
+            url: false,
+        },
     },
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      process: 'process/browser',
-    }),
-    new webpack.NormalModuleReplacementPlugin(/node:crypto/, require.resolve('crypto-browserify')),
-    new webpack.DefinePlugin({
-      global: 'globalThis',
-    }),
-  ],
+    plugins: [
+        new webpack.ProvidePlugin({
+            process: 'process/browser',
+        }),
+        new webpack.NormalModuleReplacementPlugin(
+            /node:crypto/,
+            require.resolve('crypto-browserify')
+        ),
+        new webpack.DefinePlugin({
+            global: 'globalThis',
+        }),
+    ],
 };