diff --git a/src/cmd/root.go b/src/cmd/root.go
index e5b0406..b93c224 100644
--- a/src/cmd/root.go
+++ b/src/cmd/root.go
@@ -113,6 +113,7 @@ func runRest(_ *cobra.Command, _ []string) {
 	userService := services.NewUserService(cli)
 	messageService := services.NewMessageService(cli)
 	groupService := services.NewGroupService(cli)
+	newsletterService := services.NewNewsletterService(cli)
 
 	// Rest
 	rest.InitRestApp(app, appService)
@@ -120,6 +121,7 @@ func runRest(_ *cobra.Command, _ []string) {
 	rest.InitRestUser(app, userService)
 	rest.InitRestMessage(app, messageService)
 	rest.InitRestGroup(app, groupService)
+	rest.InitRestNewsletter(app, newsletterService)
 
 	app.Get("/", func(c *fiber.Ctx) error {
 		return c.Render("views/index", fiber.Map{
diff --git a/src/domains/newletter/newsletter.go b/src/domains/newletter/newsletter.go
new file mode 100644
index 0000000..093ae75
--- /dev/null
+++ b/src/domains/newletter/newsletter.go
@@ -0,0 +1,11 @@
+package newletter
+
+import "context"
+
+type INewsletterService interface {
+	Unfollow(ctx context.Context, request UnfollowRequest) (err error)
+}
+
+type UnfollowRequest struct {
+	NewsletterID string `json:"newsletter_id" form:"newsletter_id"`
+}
diff --git a/src/domains/user/account.go b/src/domains/user/account.go
index ad23e04..d424755 100644
--- a/src/domains/user/account.go
+++ b/src/domains/user/account.go
@@ -48,3 +48,7 @@ type MyPrivacySettingResponse struct {
 type MyListGroupsResponse struct {
 	Data []types.GroupInfo `json:"data"`
 }
+
+type MyListNewsletterResponse struct {
+	Data []types.NewsletterMetadata `json:"data"`
+}
diff --git a/src/domains/user/user.go b/src/domains/user/user.go
index dabca89..feb3b78 100644
--- a/src/domains/user/user.go
+++ b/src/domains/user/user.go
@@ -8,5 +8,6 @@ type IUserService interface {
 	Info(ctx context.Context, request InfoRequest) (response InfoResponse, err error)
 	Avatar(ctx context.Context, request AvatarRequest) (response AvatarResponse, err error)
 	MyListGroups(ctx context.Context) (response MyListGroupsResponse, err error)
+	MyListNewsletter(ctx context.Context) (response MyListNewsletterResponse, err error)
 	MyPrivacySetting(ctx context.Context) (response MyPrivacySettingResponse, err error)
 }
diff --git a/src/internal/rest/newsletter.go b/src/internal/rest/newsletter.go
new file mode 100644
index 0000000..bfb7507
--- /dev/null
+++ b/src/internal/rest/newsletter.go
@@ -0,0 +1,32 @@
+package rest
+
+import (
+	domainNewsletter "github.com/aldinokemal/go-whatsapp-web-multidevice/domains/newletter"
+	"github.com/aldinokemal/go-whatsapp-web-multidevice/pkg/utils"
+	"github.com/gofiber/fiber/v2"
+)
+
+type Newsletter struct {
+	Service domainNewsletter.INewsletterService
+}
+
+func InitRestNewsletter(app *fiber.App, service domainNewsletter.INewsletterService) Newsletter {
+	rest := Newsletter{Service: service}
+	app.Post("/newsletter/unfollow", rest.Unfollow)
+	return rest
+}
+
+func (controller *Newsletter) Unfollow(c *fiber.Ctx) error {
+	var request domainNewsletter.UnfollowRequest
+	err := c.BodyParser(&request)
+	utils.PanicIfNeeded(err)
+
+	err = controller.Service.Unfollow(c.UserContext(), request)
+	utils.PanicIfNeeded(err)
+
+	return c.JSON(utils.ResponseData{
+		Status:  200,
+		Code:    "SUCCESS",
+		Message: "Success unfollow newsletter",
+	})
+}
diff --git a/src/internal/rest/user.go b/src/internal/rest/user.go
index dd01f5a..6621bb2 100644
--- a/src/internal/rest/user.go
+++ b/src/internal/rest/user.go
@@ -17,6 +17,7 @@ func InitRestUser(app *fiber.App, service domainUser.IUserService) User {
 	app.Get("/user/avatar", rest.UserAvatar)
 	app.Get("/user/my/privacy", rest.UserMyPrivacySetting)
 	app.Get("/user/my/groups", rest.UserMyListGroups)
+	app.Get("/user/my/newsletters", rest.UserMyListNewsletter)
 
 	return rest
 }
@@ -80,3 +81,15 @@ func (controller *User) UserMyListGroups(c *fiber.Ctx) error {
 		Results: response,
 	})
 }
+
+func (controller *User) UserMyListNewsletter(c *fiber.Ctx) error {
+	response, err := controller.Service.MyListNewsletter(c.UserContext())
+	utils.PanicIfNeeded(err)
+
+	return c.JSON(utils.ResponseData{
+		Status:  200,
+		Code:    "SUCCESS",
+		Message: "Success get list newsletter",
+		Results: response,
+	})
+}
diff --git a/src/pkg/whatsapp/whatsapp.go b/src/pkg/whatsapp/whatsapp.go
index d0f4953..77e20f8 100644
--- a/src/pkg/whatsapp/whatsapp.go
+++ b/src/pkg/whatsapp/whatsapp.go
@@ -107,17 +107,19 @@ func ParseJID(arg string) (types.JID, error) {
 	}
 	if !strings.ContainsRune(arg, '@') {
 		return types.NewJID(arg, types.DefaultUserServer), nil
-	} else {
-		recipient, err := types.ParseJID(arg)
-		if err != nil {
-			fmt.Printf("invalid JID %s: %v", arg, err)
-			return recipient, pkgError.ErrInvalidJID
-		} else if recipient.User == "" {
-			fmt.Printf("invalid JID %v: no server specified", arg)
-			return recipient, pkgError.ErrInvalidJID
-		}
-		return recipient, nil
 	}
+
+	recipient, err := types.ParseJID(arg)
+	if err != nil {
+		fmt.Printf("invalid JID %s: %v", arg, err)
+		return recipient, pkgError.ErrInvalidJID
+	}
+
+	if recipient.User == "" {
+		fmt.Printf("invalid JID %v: no server specified", arg)
+		return recipient, pkgError.ErrInvalidJID
+	}
+	return recipient, nil
 }
 
 func IsOnWhatsapp(waCli *whatsmeow.Client, jid string) bool {
diff --git a/src/services/newsletter.go b/src/services/newsletter.go
new file mode 100644
index 0000000..2fb90ed
--- /dev/null
+++ b/src/services/newsletter.go
@@ -0,0 +1,32 @@
+package services
+
+import (
+	"context"
+	domainNewsletter "github.com/aldinokemal/go-whatsapp-web-multidevice/domains/newletter"
+	"github.com/aldinokemal/go-whatsapp-web-multidevice/pkg/whatsapp"
+	"github.com/aldinokemal/go-whatsapp-web-multidevice/validations"
+	"go.mau.fi/whatsmeow"
+)
+
+type newsletterService struct {
+	WaCli *whatsmeow.Client
+}
+
+func NewNewsletterService(waCli *whatsmeow.Client) domainNewsletter.INewsletterService {
+	return &newsletterService{
+		WaCli: waCli,
+	}
+}
+
+func (service newsletterService) Unfollow(ctx context.Context, request domainNewsletter.UnfollowRequest) (err error) {
+	if err = validations.ValidateUnfollowNewsletter(ctx, request); err != nil {
+		return err
+	}
+
+	JID, err := whatsapp.ValidateJidWithLogin(service.WaCli, request.NewsletterID)
+	if err != nil {
+		return err
+	}
+
+	return service.WaCli.UnfollowNewsletter(JID)
+}
diff --git a/src/services/user.go b/src/services/user.go
index a6e7b8a..19d0652 100644
--- a/src/services/user.go
+++ b/src/services/user.go
@@ -127,6 +127,20 @@ func (service userService) MyListGroups(_ context.Context) (response domainUser.
 	return response, nil
 }
 
+func (service userService) MyListNewsletter(_ context.Context) (response domainUser.MyListNewsletterResponse, err error) {
+	whatsapp.MustLogin(service.WaCli)
+
+	datas, err := service.WaCli.GetSubscribedNewsletters()
+	if err != nil {
+		return
+	}
+	fmt.Printf("%+v\n", datas)
+	for _, data := range datas {
+		response.Data = append(response.Data, *data)
+	}
+	return response, nil
+}
+
 func (service userService) MyPrivacySetting(_ context.Context) (response domainUser.MyPrivacySettingResponse, err error) {
 	whatsapp.MustLogin(service.WaCli)
 
diff --git a/src/validations/newsletter_validation.go b/src/validations/newsletter_validation.go
new file mode 100644
index 0000000..da61da9
--- /dev/null
+++ b/src/validations/newsletter_validation.go
@@ -0,0 +1,20 @@
+package validations
+
+import (
+	"context"
+	domainNewsletter "github.com/aldinokemal/go-whatsapp-web-multidevice/domains/newletter"
+	pkgError "github.com/aldinokemal/go-whatsapp-web-multidevice/pkg/error"
+	validation "github.com/go-ozzo/ozzo-validation/v4"
+)
+
+func ValidateUnfollowNewsletter(ctx context.Context, request domainNewsletter.UnfollowRequest) error {
+	err := validation.ValidateStructWithContext(ctx, &request,
+		validation.Field(&request.NewsletterID, validation.Required),
+	)
+
+	if err != nil {
+		return pkgError.ValidationError(err.Error())
+	}
+
+	return nil
+}
diff --git a/src/views/components/AccountAvatar.js b/src/views/components/AccountAvatar.js
index 2e602cb..e9ab15f 100644
--- a/src/views/components/AccountAvatar.js
+++ b/src/views/components/AccountAvatar.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'AccountAvatar',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             image: null,
             loading: false,
@@ -12,7 +17,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -45,7 +50,7 @@ export default {
         handleReset() {
             this.phone = '';
             this.image = null;
-            this.type = 'user';
+            this.type = window.TYPEUSER;
         }
     },
     template: `
@@ -66,19 +71,7 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
 
                 <div class="field">
                     <label>Preview</label>
diff --git a/src/views/components/AccountUserInfo.js b/src/views/components/AccountUserInfo.js
index a034990..8e307bf 100644
--- a/src/views/components/AccountUserInfo.js
+++ b/src/views/components/AccountUserInfo.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'AccountUserInfo',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             //
             name: null,
@@ -15,7 +20,7 @@ export default {
 
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -52,7 +57,7 @@ export default {
             this.name = null;
             this.status = null;
             this.devices = [];
-            this.type = 'user';
+            this.type = window.TYPEUSER;
         }
     },
     template: `
@@ -74,18 +79,7 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
 
                 <button type="button" class="ui primary button" :class="{'loading': loading}"
                         @click="handleSubmit">
diff --git a/src/views/components/MessageDelete.js b/src/views/components/MessageDelete.js
index cb6f46d..12cd6e6 100644
--- a/src/views/components/MessageDelete.js
+++ b/src/views/components/MessageDelete.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'DeleteMessage',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             message_id: '',
             loading: false,
@@ -10,7 +15,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -48,7 +53,7 @@ export default {
             }
         },
         handleReset() {
-            this.type = 'user';
+            this.type = window.TYPEUSER;
             this.phone = '';
             this.message_id = '';
             this.new_message = '';
@@ -74,19 +79,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Message ID</label>
                     <input v-model="message_id" type="text" placeholder="Please enter your message id"
diff --git a/src/views/components/MessageReact.js b/src/views/components/MessageReact.js
index d588965..fdc23eb 100644
--- a/src/views/components/MessageReact.js
+++ b/src/views/components/MessageReact.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'ReactMessage',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             message_id: '',
             emoji: '',
@@ -11,7 +16,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -51,7 +56,7 @@ export default {
             this.phone = '';
             this.message_id = '';
             this.emoji = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
         },
     },
     template: `
@@ -74,19 +79,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Message ID</label>
                     <input v-model="message_id" type="text" placeholder="Please enter your message id"
diff --git a/src/views/components/MessageRevoke.js b/src/views/components/MessageRevoke.js
index 959919b..834706f 100644
--- a/src/views/components/MessageRevoke.js
+++ b/src/views/components/MessageRevoke.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'Message',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             message_id: '',
             loading: false,
@@ -10,7 +15,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -49,7 +54,7 @@ export default {
         handleReset() {
             this.phone = '';
             this.message_id = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
         },
     },
     template: `
@@ -71,19 +76,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label> Message ID</label>
                     <input v-model="message_id" type="text" placeholder="Please enter your message id"
diff --git a/src/views/components/MessageUpdate.js b/src/views/components/MessageUpdate.js
index 0138b64..a949772 100644
--- a/src/views/components/MessageUpdate.js
+++ b/src/views/components/MessageUpdate.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'UpdateMessage',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             message_id: '',
             new_message: '',
@@ -11,7 +16,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -49,7 +54,7 @@ export default {
             }
         },
         handleReset() {
-            this.type = 'user';
+            this.type = window.TYPEUSER;
             this.phone = '';
             this.message_id = '';
             this.new_message = '';
@@ -75,19 +80,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Message ID</label>
                     <input v-model="message_id" type="text" placeholder="Please enter your message id"
diff --git a/src/views/components/NewsletterList.js b/src/views/components/NewsletterList.js
new file mode 100644
index 0000000..0c5c2bb
--- /dev/null
+++ b/src/views/components/NewsletterList.js
@@ -0,0 +1,115 @@
+export default {
+    name: 'ListNewsletter',
+    data() {
+        return {
+            newsletters: []
+        }
+    },
+    methods: {
+        async openModal() {
+            try {
+                this.dtClear()
+                await this.submitApi();
+                $('#modalNewsletterList').modal('show');
+                this.dtRebuild()
+                showSuccessInfo("Newsletters fetched")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        dtClear() {
+            $('#account_newsletters_table').DataTable().destroy();
+        },
+        dtRebuild() {
+            $('#account_newsletters_table').DataTable({
+                "pageLength": 100,
+                "reloadData": true,
+            }).draw();
+        },
+        async handleUnfollowNewsletter(newsletter_id) {
+            try {
+                const ok = confirm("Are you sure to leave this newsletter?");
+                if (!ok) return;
+
+                await this.unfollowNewsletterApi(newsletter_id);
+                this.dtClear()
+                await this.submitApi();
+                this.dtRebuild()
+                showSuccessInfo("Success unfollow newsletter")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async unfollowNewsletterApi(newsletter_id) {
+            try {
+                let payload = new FormData();
+                payload.append("newsletter_id", newsletter_id)
+                await window.http.post(`/newsletter/unfollow`, payload)
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+
+            }
+        },
+        async submitApi() {
+            try {
+                let response = await window.http.get(`/user/my/newsletters`)
+                this.newsletters = response.data.results.data;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+            }
+        },
+        formatDate: function (value) {
+            if (!value) return ''
+            return moment.unix(value).format('LLL');
+        }
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer">
+        <div class="content">
+            <a class="ui green right ribbon label">Newsletter</a>
+            <div class="header">List Newsletters</div>
+            <div class="description">
+                Display all your newsletters
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal AccountNewsletter  -->
+    <div class="ui small modal" id="modalNewsletterList">
+        <i class="close icon"></i>
+        <div class="header">
+            My Newsletter List
+        </div>
+        <div class="content">
+            <table class="ui celled table" id="account_newsletters_table">
+                <thead>
+                <tr>
+                    <th>Newsletter ID</th>
+                    <th>Name</th>
+                    <th>Role</th>
+                    <th>Created At</th>
+                    <th>Action</th>
+                </tr>
+                </thead>
+                <tbody v-if="newsletters != null">
+                <tr v-for="n in newsletters">
+                    <td>{{ n.id.split('@')[0] }}</td>
+                    <td>{{ n.thread_metadata.name.text }}</td>
+                    <td>{{ n.viewer_metadata.role }}</td>
+                    <td>{{ formatDate(n.thread_metadata.creation_time) }}</td>
+                    <td>
+                        <button class="ui red tiny button" @click="handleUnfollowNewsletter(n.id)">Unfollow</button>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    `
+}
\ No newline at end of file
diff --git a/src/views/components/SendAudio.js b/src/views/components/SendAudio.js
index 7651ddd..c237e1a 100644
--- a/src/views/components/SendAudio.js
+++ b/src/views/components/SendAudio.js
@@ -1,15 +1,20 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'Send',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
             phone: '',
-            type: 'user',
+            type: window.TYPEUSER,
             loading: false,
         }
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -49,7 +54,7 @@ export default {
         },
         handleReset() {
             this.phone = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
             $("#file_audio").val('');
         },
     },
@@ -72,19 +77,7 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
                 <div class="field" style="padding-bottom: 30px">
                     <label>Audio</label>
                     <input type="file" style="display: none" accept="audio/*" id="file_audio"/>
diff --git a/src/views/components/SendContact.js b/src/views/components/SendContact.js
index 2123962..21b899d 100644
--- a/src/views/components/SendContact.js
+++ b/src/views/components/SendContact.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'SendContact',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             card_name: '',
             card_phone: '',
@@ -11,7 +16,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -58,7 +63,7 @@ export default {
             this.phone = '';
             this.card_name = '';
             this.card_phone = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
         },
     },
     template: `
@@ -80,19 +85,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Contact Name</label>
                     <input v-model="card_name" type="text" placeholder="Please enter contact name"
diff --git a/src/views/components/SendFile.js b/src/views/components/SendFile.js
index 7039f72..affbb4c 100644
--- a/src/views/components/SendFile.js
+++ b/src/views/components/SendFile.js
@@ -1,5 +1,10 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'SendFile',
+    components: {
+        FormRecipient
+    },
     props: {
         maxFileSize: {
             type: String,
@@ -9,14 +14,14 @@ export default {
     data() {
         return {
             caption: '',
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             loading: false,
         }
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -58,7 +63,7 @@ export default {
         handleReset() {
             this.caption = '';
             this.phone = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
             $("#file_file").val('');
         },
     },
@@ -82,19 +87,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Caption</label>
                     <textarea v-model="caption" placeholder="Type some caption (optional)..."
diff --git a/src/views/components/SendImage.js b/src/views/components/SendImage.js
index 04ae09e..5c276c9 100644
--- a/src/views/components/SendImage.js
+++ b/src/views/components/SendImage.js
@@ -1,19 +1,24 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'SendImage',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
             phone: '',
             view_once: false,
             compress: false,
             caption: '',
-            type: 'user',
+            type: window.TYPEUSER,
             loading: false,
             selected_file: null
         }
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -60,7 +65,7 @@ export default {
             this.compress = false;
             this.phone = '';
             this.caption = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
             $("#file_image").val('');
         },
     },
@@ -85,19 +90,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Caption</label>
                     <textarea v-model="caption" type="text" placeholder="Hello this is image caption"
diff --git a/src/views/components/SendLocation.js b/src/views/components/SendLocation.js
index ce6c479..68c3be2 100644
--- a/src/views/components/SendLocation.js
+++ b/src/views/components/SendLocation.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'SendLocation',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             latitude: '',
             longitude: '',
@@ -11,7 +16,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -56,7 +61,7 @@ export default {
             this.phone = '';
             this.latitude = '';
             this.longitude = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
         },
     },
     template: `
@@ -78,19 +83,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Location Latitude</label>
                     <input v-model="latitude" type="text" placeholder="Please enter latitude"
diff --git a/src/views/components/SendMessage.js b/src/views/components/SendMessage.js
index 88235ea..63c1616 100644
--- a/src/views/components/SendMessage.js
+++ b/src/views/components/SendMessage.js
@@ -1,8 +1,13 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'SendMessage',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             text: '',
             reply_message_id: '',
@@ -11,7 +16,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -57,7 +62,7 @@ export default {
         handleReset() {
             this.phone = '';
             this.text = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
             this.reply_message_id = '';
         },
     },
@@ -80,19 +85,7 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
                 <div class="field">
                     <label>Reply Message ID</label>
                     <input v-model="reply_message_id" type="text"
diff --git a/src/views/components/SendPoll.js b/src/views/components/SendPoll.js
index 5ef2ce7..ebedf32 100644
--- a/src/views/components/SendPoll.js
+++ b/src/views/components/SendPoll.js
@@ -1,10 +1,15 @@
 // export Vue Component
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'SendPoll',
+    components: {
+        FormRecipient
+    },
     data() {
         return {
             phone: '',
-            type: 'user',
+            type: window.TYPEUSER,
             loading: false,
             question: '',
             options: ['', ''],
@@ -13,7 +18,7 @@ export default {
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -56,7 +61,7 @@ export default {
         },
         handleReset() {
             this.phone = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
             this.question = '';
             this.options = ['', ''];
             this.max_vote = 1;
@@ -87,19 +92,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Question</label>
                     <input v-model="question" type="text" placeholder="Please enter question"
diff --git a/src/views/components/SendVideo.js b/src/views/components/SendVideo.js
index 5574e50..6a93593 100644
--- a/src/views/components/SendVideo.js
+++ b/src/views/components/SendVideo.js
@@ -1,5 +1,10 @@
+import FormRecipient from "./generic/FormRecipient.js";
+
 export default {
     name: 'SendVideo',
+    components: {
+        FormRecipient
+    },
     // define props
     props: {
         maxVideoSize: {
@@ -12,14 +17,14 @@ export default {
             caption: '',
             view_once: false,
             compress: false,
-            type: 'user',
+            type: window.TYPEUSER,
             phone: '',
             loading: false,
         }
     },
     computed: {
         phone_id() {
-            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+            return this.phone + this.type;
         }
     },
     methods: {
@@ -65,7 +70,7 @@ export default {
             this.view_once = false;
             this.compress = false;
             this.phone = '';
-            this.type = 'user';
+            this.type = window.TYPEUSER;
             $("#file_video").val('');
         },
     },
@@ -91,19 +96,8 @@ export default {
         </div>
         <div class="content">
             <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="type" v-model="type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="phone_id" disabled aria-label="whatsapp_id">
-                </div>
+                <FormRecipient v-model:type="type" v-model:phone="phone"/>
+                
                 <div class="field">
                     <label>Caption</label>
                     <textarea v-model="caption" placeholder="Type some caption (optional)..."
diff --git a/src/views/components/generic/FormRecipient.js b/src/views/components/generic/FormRecipient.js
new file mode 100644
index 0000000..d763e52
--- /dev/null
+++ b/src/views/components/generic/FormRecipient.js
@@ -0,0 +1,52 @@
+export default {
+    name: 'FormRecipient',
+    props: {
+        type: {
+            type: String,
+            required: true
+        },
+        phone: {
+            type: String,
+            required: true
+        },
+    },
+    data() {
+        return {
+            recipientTypes: []
+        };
+    },
+    computed: {
+        phone_id() {
+            return this.phone + this.type;
+        }
+    },
+    mounted() {
+        this.recipientTypes = [
+            { value: window.TYPEUSER, text: 'Private Message' },
+            { value: window.TYPEGROUP, text: 'Group Message' },
+            { value: window.TYPENEWSLETTER, text: 'Newsletter' }
+        ];
+    },
+    methods: {
+        updateType(event) {
+            this.$emit('update:type', event.target.value);
+        },
+        updatePhone(event) {
+            this.$emit('update:phone', event.target.value);
+        }
+    },
+    template: `
+    <div class="field">
+        <label>Type</label>
+        <select name="type" @change="updateType" class="ui dropdown">
+            <option v-for="type in recipientTypes" :value="type.value">{{ type.text }}</option>
+        </select>
+    </div>
+    
+    <div class="field">
+        <label>Phone / Group ID</label>
+        <input :value="phone" aria-label="wa identifier" @input="updatePhone">
+        <input :value="phone_id" disabled aria-label="whatsapp_id">
+    </div>
+    `
+}
\ No newline at end of file
diff --git a/src/views/index.html b/src/views/index.html
index 83321d0..564749d 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -86,6 +86,14 @@
         <group-add-participants></group-add-participants>
     </div>
 
+    <div class="ui horizontal divider">
+        Newsletter
+    </div>
+
+    <div class="ui three column doubling grid cards">
+        <newsletter-list></newsletter-list>
+    </div>
+
     <div class="ui horizontal divider">
         Account
     </div>
@@ -98,8 +106,9 @@
 
 </div>
 <script>
-    window.TYPEGROUP = "g.us";
-    window.TYPEUSER = "s.whatsapp.net";
+    window.TYPEGROUP = "@g.us";
+    window.TYPEUSER = "@s.whatsapp.net";
+    window.TYPENEWSLETTER = "@newsletter";
     window.showErrorInfo = (message) => {
         $('body').toast({
             position: 'bottom right',
@@ -120,7 +129,7 @@
     }
 
     window.http = axios.create({
-        baseURL: `${window.location.protocol}//${window.location.hostname}`
+        baseURL: `${window.location.protocol}//${window.location.hostname}${window.location.port ? ':' + window.location.port : ''}`
     });
     {{ if isEnableBasicAuth .BasicAuthToken }}
     window.http.defaults.headers.common['Authorization'] = {{ .BasicAuthToken }};
@@ -150,6 +159,7 @@
     import AccountAvatar from "./components/AccountAvatar.js";
     import AccountUserInfo from "./components/AccountUserInfo.js";
     import AccountPrivacy from "./components/AccountPrivacy.js";
+    import NewsletterList from "./components/NewsletterList.js";
 
     const showErrorInfo = (message) => {
         $('body').toast({
@@ -176,6 +186,7 @@
             SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageDelete, MessageUpdate, MessageReact, MessageRevoke,
             GroupList, GroupCreate, GroupJoinWithLink, GroupAddParticipants,
+            NewsletterList,
             AccountAvatar, AccountUserInfo, AccountPrivacy
         },
         delimiters: ['[[', ']]'],