diff --git a/firebase.json b/firebase.json
index 771c1b9..1d35313 100644
--- a/firebase.json
+++ b/firebase.json
@@ -6,6 +6,10 @@
     "auth": {
       "port": 9099
     },
+    "storage": {
+      "port": 9199,
+      "host": "127.0.0.1"
+    },
     "ui": {
       "enabled": true,
       "port": 4000
diff --git a/web/lib/firebase/init.ts b/web/lib/firebase/init.ts
index 2b0202d..770f1d6 100644
--- a/web/lib/firebase/init.ts
+++ b/web/lib/firebase/init.ts
@@ -1,11 +1,19 @@
-import { getStorage } from 'firebase/storage'
-import { getApp, getApps, initializeApp } from 'firebase/app'
-import { FIREBASE_CONFIG } from 'common/envs/constants'
+import {connectStorageEmulator, getStorage} from 'firebase/storage'
+import {getApp, getApps, initializeApp} from 'firebase/app'
+import {FIREBASE_CONFIG, IS_FIREBASE_EMULATOR} from 'common/envs/constants'
 
 // Initialize Firebase
 export const app = getApps().length ? getApp() : initializeApp(FIREBASE_CONFIG)
+
+// Initialize storage with emulator support
 export const storage = getStorage()
 export const privateStorage = getStorage(
   app,
   'gs://' + FIREBASE_CONFIG.privateBucket
 )
+
+// Connect to storage emulator if in emulator mode
+if (IS_FIREBASE_EMULATOR) {
+  connectStorageEmulator(storage, '127.0.0.1', 9199)
+  connectStorageEmulator(privateStorage, '127.0.0.1', 9199)
+}
diff --git a/web/next.config.js b/web/next.config.js
index 6d636a8..b28e741 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -61,6 +61,7 @@ module.exports = {
             {hostname: '*.giphy.com'},
             {hostname: 'ui-avatars.com'},
             {hostname: 'localhost'},
+            {hostname: '127.0.0.1'},
         ],
     },
     webpack: (config, {dev}) => {