diff --git a/client_essential/Worker.cpp b/client_essential/Worker.cpp
index 6ea1a6d..9ae77d6 100644
--- a/client_essential/Worker.cpp
+++ b/client_essential/Worker.cpp
@@ -20,7 +20,7 @@ decltype(WebRtcNsx_Create()) ns_ = nullptr;
 
 using namespace webrtc;
 
-const char *constPort ="1222";
+//const char *constPort ="80";
 
 Worker::Worker(bool needAec)
     :needAec_(needAec)
@@ -82,8 +82,7 @@ bool Worker::initCodec(){
 }
 
 bool Worker::initDevice(std::function<void(const std::string &, const std::string &)> reportInfo,
-                        std::function<void(const uint8_t)> reportMicVolume,
-                        std::function<void(const uint8_t)> reportSpkVolume,
+                        std::function<void(const AudioIoVolume)> reportVolume,
                         std::function<void(const bool)> vadReporter){
     device_ = &(Factory::get().create());
 
@@ -91,20 +90,19 @@ bool Worker::initDevice(std::function<void(const std::string &, const std::strin
     std::string spkInfo;
     if (device_->init(micInfo, spkInfo)){
         reportInfo(micInfo, spkInfo);
-        micVolumeReporter_ = reportMicVolume;
-        spkVolumeReporter_ = reportSpkVolume;
+        volumeReporter_ = reportVolume;
         vadReporter_ = vadReporter;
         return true;
     }
     return false;
 }
 
-void Worker::asyncStart(const std::string &host, std::function<void (const NetworkState &, const std::string &)> toggleState){
+void Worker::asyncStart(const std::string &host,const std::string &port, std::function<void (const NetworkState &, const std::string &)> toggleState){
     syncStop();
-    netThread_.reset(new std::thread(std::bind(&Worker::syncStart, this, host, toggleState)));
+    netThread_.reset(new std::thread(std::bind(&Worker::syncStart, this, host, port, toggleState)));
 }
 
-void Worker::syncStart(const std::string &host,
+void Worker::syncStart(const std::string &host,const std::string &port,
                         std::function<void(const NetworkState &newState, const std::string &extraMessage)> toggleState
                           ){
 
@@ -114,7 +112,7 @@ void Worker::syncStart(const std::string &host,
         bool isLogin = false;
         TcpClient client(
                     host.c_str(),
-                    constPort,
+                    port.c_str(),
                     [&](TcpClient *_TcpClient, const NetPacket& netPacket){
             // on Received Data
             switch (netPacket.payloadType()){
@@ -147,9 +145,9 @@ void Worker::syncStart(const std::string &host,
                         }
                     }
                     auto ret = device_->write(decodedPcm);
-                    if (spkVolumeReporter_){
+                    if (volumeReporter_){
                         static SuckAudioVolume sav;
-                        spkVolumeReporter_(sav.calculate(decodedPcm));
+                        volumeReporter_({AudioInOut::Out, sav.calculate(decodedPcm, AudioIoVolume::MAX_VOLUME_LEVEL)});
                     }
                     if (!ret) {
                         std::cout << ret.message() << std::endl;
@@ -251,9 +249,9 @@ void Worker::syncStart(const std::string &host,
 
 
 
-            if (micVolumeReporter_){
+            if (volumeReporter_){
                 static SuckAudioVolume sav;
-                micVolumeReporter_(sav.calculate(denoisedBuffer));
+                volumeReporter_({AudioInOut::In, sav.calculate(denoisedBuffer, AudioIoVolume::MAX_VOLUME_LEVEL)});
             }
 
             auto haveVoice = (1==WebRtcVad_Process(vad, sampleRate, denoisedBuffer.data(), sampleRate/100));
diff --git a/client_qt5/CMakeLists.txt b/client_qt5/CMakeLists.txt
index f80578c..796d077 100644
--- a/client_qt5/CMakeLists.txt
+++ b/client_qt5/CMakeLists.txt
@@ -49,14 +49,19 @@ set(SRCS
     mainwindow.ui
     mainwindow.cpp
     main.cpp
+
 )
 
+# QRC files
+set(QRC_SOURCE_FILES resources/Resource.qrc)
+qt5_add_resources(QRC_FILES ${QRC_SOURCE_FILES})
+
 
 
 if(WIN32)
-    add_executable(${PROJECT_NAME} WIN32 ${SRCS} resources/Resource.rc)
+    add_executable(${PROJECT_NAME} WIN32 ${SRCS} ${QRC_FILES} resources/Resource.rc)
 else(WIN32)
-    add_executable(${PROJECT_NAME} ${SRCS})
+    add_executable(${PROJECT_NAME} ${SRCS} ${QRC_FILES})
 endif(WIN32)
 
 target_link_libraries(
diff --git a/client_qt5/mainwindow.cpp b/client_qt5/mainwindow.cpp
index f65e0d5..6f228a7 100644
--- a/client_qt5/mainwindow.cpp
+++ b/client_qt5/mainwindow.cpp
@@ -12,15 +12,21 @@
 #include <QDir>
 #include <QDebug>
 #include <memory>
+#include <QKeyEvent>
+#include <QDesktopServices>
 
 
-/// TODO:
-/// - display VAD result in real-time
 
+QEvent::Type AudioVolumeEvent::sType = (QEvent::Type)QEvent::registerEventType();
+QEvent::Type VadEvent::sType = (QEvent::Type)QEvent::registerEventType();
 
-MainWindow::MainWindow(QWidget *parent) :
-    QMainWindow(parent),
-    ui(new Ui::MainWindow)
+
+MainWindow::MainWindow(QWidget *parent)
+    :QMainWindow(parent)
+    ,ui(new Ui::MainWindow)
+    ,vertical_bar_full(":/vertical_bar_full.png")
+    ,vertical_bar_empty(":/vertical_bar_empty.png")
+    ,vertical_bar_half_full(":/vertical_bar_half_full.png")
 {
     ui->setupUi(this);
 
@@ -47,20 +53,94 @@ MainWindow::MainWindow(QWidget *parent) :
 
 
 
-    //        init UI
+    /// Init UI
     {
-        // -> center of screen
-        setGeometry(QStyle::alignedRect(
-                        Qt::LeftToRight,
-                        Qt::AlignCenter,
-                        size(),
-                        qApp->desktop()->availableGeometry()
-                        )
-                    );
-        setFixedSize(width(), height());
-        updateUiState(NetworkState::Disconnected);
+        /// -> center of screen, and fix window Size
+        {
+            setGeometry(QStyle::alignedRect(
+                            Qt::LeftToRight,
+                            Qt::AlignCenter,
+                            size(),
+                            qApp->desktop()->availableGeometry()
+                            )
+                        );
+            setFixedSize(width(), height());
+
+        }
+
+
+
+        /// insert images to qlabels
+        {
+            ui->label_img_ain->setPixmap(QPixmap(":/microphone.png"));
+            ui->label_img_ain->setScaledContents(true);
+
+            ui->label_img_aout->setPixmap(QPixmap(":/speaker.png"));
+            ui->label_img_aout->setScaledContents(true);
+        }
+
+
+
+        /// FIX ME.... ugly enough
+        {
+            {
+                auto type = 0;
+                auto index = 0;
+                label_img_[type][index++]=ui->label_img_ain_bar0;
+                label_img_[type][index++]=ui->label_img_ain_bar1;
+                label_img_[type][index++]=ui->label_img_ain_bar2;
+                label_img_[type][index++]=ui->label_img_ain_bar3;
+                label_img_[type][index++]=ui->label_img_ain_bar4;
+                label_img_[type][index++]=ui->label_img_ain_bar5;
+                label_img_[type][index++]=ui->label_img_ain_bar6;
+                label_img_[type][index++]=ui->label_img_ain_bar7;
+                label_img_[type][index++]=ui->label_img_ain_bar8;
+                label_img_[type][index++]=ui->label_img_ain_bar9;
+            }
+
+            {
+                auto type = 1;
+                auto index = 0;
+                label_img_[type][index++]=ui->label_img_aout_bar0;
+                label_img_[type][index++]=ui->label_img_aout_bar1;
+                label_img_[type][index++]=ui->label_img_aout_bar2;
+                label_img_[type][index++]=ui->label_img_aout_bar3;
+                label_img_[type][index++]=ui->label_img_aout_bar4;
+                label_img_[type][index++]=ui->label_img_aout_bar5;
+                label_img_[type][index++]=ui->label_img_aout_bar6;
+                label_img_[type][index++]=ui->label_img_aout_bar7;
+                label_img_[type][index++]=ui->label_img_aout_bar8;
+                label_img_[type][index++]=ui->label_img_aout_bar9;
+            }
+            for (int i = 0; i <AudioIoVolume::MAX_VOLUME_LEVEL; i++){
+                label_img_[0][i]->setScaledContents(true);
+                label_img_[1][i]->setScaledContents(true);
+            }
+        }
+
+
 
-        connect(ui->lineEdit_serverHost, SIGNAL(returnPressed()), ui->pushButton_connecting, SLOT(click()));
+        /// tool tip
+        {
+            ui->lineEdit_serverHost->setToolTip("example: your.server.com\n or:      12.45.67.89");
+        }
+
+
+        {
+            connect(ui->lineEdit_serverHost, SIGNAL(returnPressed()), ui->pushButton_connecting, SLOT(click()));
+            connect(ui->lineEdit_serverPort, SIGNAL(returnPressed()), ui->pushButton_connecting, SLOT(click()));
+        }
+
+
+
+        /// init state
+        {
+            onVolumeChanged({AudioInOut::In, 0u});
+            onVolumeChanged({AudioInOut::Out, 0u});
+            updateUiState(NetworkState::Disconnected);
+            toggleAdvancedMode(true);
+            showMessage("F1: help    F2: advanced mode");
+        }
     }
 
 }
@@ -90,49 +170,7 @@ MainWindow::~MainWindow()
 void MainWindow::on_pushButton_connecting_clicked(){
     switch (currentUiState_){
     case NetworkState::Disconnected: {
-        {
-            updateUiState(NetworkState::Connecting);
-
-
-            worker_ = std::make_shared<Worker>(ui->checkBox_needAec->checkState()==Qt::CheckState::Checked);
-
-            try {
-                if (!worker_->initCodec()){
-                    throw "worker_.initCodec failed";
-                }
-                if (!worker_->initDevice(
-                            [this](const std::string &micInfo,
-                                   const std::string &spkInfo){
-                                    ui->label_micInfo->setText(micInfo.c_str());
-                                    ui->label_spkInfo->setText(spkInfo.c_str());
-                                   },[this](const uint8_t newVolume){
-                                        ui->label_volumeMic->setText(std::to_string(newVolume).c_str());
-                                    }, [this](const uint8_t newVolume){
-                                        ui->label_volumeSpk->setText(std::to_string(newVolume).c_str());
-                                    }, [this] (const bool isActive){
-                                        ui->label_vad->setText(isActive? "active" : "inactive");
-                                    }
-                    )){
-                        throw "worker_.initDevice failed";
-                }
-            }
-            catch (std::exception &e){
-                qDebug() << "Exception: " << e.what() << "\n";
-            }
-
-
-            worker_->asyncStart(
-                        ui->lineEdit_serverHost->text().toStdString(),
-                        [this](
-                        const NetworkState newState,
-                        const std::string extraMessage
-                        )
-            {
-                showMessage(extraMessage);
-                updateUiState(newState);
-            }
-            );
-        }
+        gotoWork();
         break;
     }
     case NetworkState::Connected:{
@@ -152,6 +190,7 @@ void MainWindow::updateUiState(const NetworkState networkState){
     switch(networkState){
     case NetworkState::Disconnected:{
         ui->lineEdit_serverHost->setEnabled(true);
+        ui->lineEdit_serverPort->setEnabled(true);
         ui->checkBox_needAec->setEnabled(true);
         ui->pushButton_connecting->setEnabled(true);
         ui->pushButton_connecting->setText("Connect!");
@@ -160,6 +199,7 @@ void MainWindow::updateUiState(const NetworkState networkState){
     }
     case NetworkState::Connecting:{
         ui->lineEdit_serverHost->setEnabled(false);
+        ui->lineEdit_serverPort->setEnabled(false);
         ui->checkBox_needAec->setEnabled(false);
         ui->pushButton_connecting->setEnabled(false);
         ui->pushButton_connecting->setText("Connecting...");
@@ -167,6 +207,7 @@ void MainWindow::updateUiState(const NetworkState networkState){
     }
     case NetworkState::Connected:{
         ui->lineEdit_serverHost->setEnabled(false);
+        ui->lineEdit_serverPort->setEnabled(false);
         ui->checkBox_needAec->setEnabled(false);
         ui->pushButton_connecting->setEnabled(true);
         ui->pushButton_connecting->setText("Disconnect!");
@@ -178,13 +219,81 @@ void MainWindow::updateUiState(const NetworkState networkState){
     currentUiState_=networkState;
 }
 
+void MainWindow::onVolumeChanged(const AudioIoVolume aivl) {
+    if(mainThreadId_ == std::this_thread::get_id()){
+        for (int i =0;i< AudioIoVolume::MAX_VOLUME_LEVEL;i++){
+            label_img_[(uint8_t)aivl.io_][i]->setPixmap(i<aivl.level_? vertical_bar_half_full: vertical_bar_empty);
+        }
+    }
+    else{
+        QCoreApplication::postEvent(this, new AudioVolumeEvent(aivl));
+    }
+}
+
+void MainWindow::onVad(bool isActive){
+    if(mainThreadId_ == std::this_thread::get_id()){
+        ui->label_vad->setText(isActive? "active" : "inactive");
+    }
+    else{
+        QCoreApplication::postEvent(this, new VadEvent(isActive));
+    }
+}
+
+void MainWindow::toggleAdvancedMode(bool newMode)
+{
+    advancedMode_ = newMode;
+    ui->groupBox_details->setVisible(advancedMode_);
+    ui->lineEdit_serverPort->setVisible(advancedMode_);
+    setFixedSize(advancedMode_?600:300,400);
+}
+
+void MainWindow::gotoWork(){
+    try {
+        updateUiState(NetworkState::Connecting);
+
+
+        worker_ = std::make_shared<Worker>(ui->checkBox_needAec->checkState()==Qt::CheckState::Checked);
+
+        if (!worker_->initCodec()){
+            throw "worker_.initCodec failed";
+        }
+
+        if (!worker_->initDevice(
+                    std::bind(&MainWindow::onDeviceNameChanged, this, std::placeholders::_1,std::placeholders::_2),
+                    std::bind(&MainWindow::onVolumeChanged, this, std::placeholders::_1),
+                    std::bind(&MainWindow::onVad, this, std::placeholders::_1)
+                    )){
+            throw "worker_.initDevice failed";
+        }
+
+
+        worker_->asyncStart(
+                    ui->lineEdit_serverHost->text().toStdString(),
+                    ui->lineEdit_serverPort->text().toStdString(),
+                    [this](
+                    const NetworkState newState,
+                    const std::string extraMessage
+                    )
+        {
+            showMessage(extraMessage);
+            updateUiState(newState);
+        }
+        );
+
+    }
+    catch (std::exception &e){
+        qDebug() << "Exception: " << e.what() << "\n";
+    }
+
+}
+
 void MainWindow::showMessage(const std::string &message){
     try {
         if (message.empty()){
             ui->statusBar->clearMessage();
         }
         else {
-            ui->statusBar->showMessage(message.c_str()); // TODO: thread-unsafety?
+            ui->statusBar->showMessage(message.c_str());
             qDebug() << message.c_str();
         }
     }
@@ -192,3 +301,28 @@ void MainWindow::showMessage(const std::string &message){
         qDebug() << e.what();
     }
 }
+
+bool MainWindow::event(QEvent *event)
+{
+    if (event->type() == QEvent::KeyPress) {
+        QKeyEvent *ke = static_cast<QKeyEvent *>(event);
+        if (ke->key() == Qt::Key_F1){
+            QDesktopServices::openUrl(QUrl("https://github.com/zhang-ray/easy-voice-call"));
+        }
+        else if (ke->key() == Qt::Key_F2){
+            toggleAdvancedMode();
+        }
+    } else if (event->type() == AudioVolumeEvent::sType) {
+        AudioVolumeEvent *myEvent = static_cast<AudioVolumeEvent *>(event);
+        onVolumeChanged({myEvent->io_, myEvent->level_});
+        return true;
+    }
+    else if (event->type() == VadEvent::sType){
+        VadEvent *myEvent = static_cast<VadEvent *>(event);
+        onVad(myEvent->isActive_);
+        return true;
+    }
+
+    return QWidget::event(event);
+}
+
diff --git a/client_qt5/mainwindow.hpp b/client_qt5/mainwindow.hpp
index acda25c..bfc54a9 100644
--- a/client_qt5/mainwindow.hpp
+++ b/client_qt5/mainwindow.hpp
@@ -4,16 +4,39 @@
 #include <QMainWindow>
 #include <memory>
 #include "evc/Worker.hpp"
-
-
+#include <QLabel>
+#include <QEvent>
 
 namespace Ui {
 class MainWindow;
 }
 
 
+class AudioVolumeEvent : public QEvent, public AudioIoVolume {
+public:
+    // char test[1<<20]; //for memory test
+    static QEvent::Type sType;
+    AudioVolumeEvent(const AudioIoVolume aiv)
+        : QEvent(AudioVolumeEvent::sType)
+        , AudioIoVolume(aiv)
+    {
+    }
+
+    AudioVolumeEvent(const AudioInOut io, const uint8_t level)
+        : QEvent(sType)
+        , AudioIoVolume(io, level)
+    {
+    }
+};
 
 
+class VadEvent : public QEvent {
+private:
+public:
+    bool isActive_;
+    static QEvent::Type sType;
+    VadEvent(const bool isActive):isActive_(isActive), QEvent(sType){}
+};
 
 class MainWindow : public QMainWindow
 {
@@ -27,6 +50,14 @@ private slots:
     void on_pushButton_connecting_clicked();
     void updateUiState(const NetworkState networkState);
 
+
+    /// TODO: render max volume bar
+    void onVolumeChanged(const AudioIoVolume);
+    void onDeviceNameChanged(const std::string &newMic, const std::string &newSpk){}
+    void onVad(bool isActive);
+    void toggleAdvancedMode(){toggleAdvancedMode(!advancedMode_);}
+    void toggleAdvancedMode(bool newMode);
+    void gotoWork();
 private:
     Ui::MainWindow *ui = nullptr;
 
@@ -37,5 +68,16 @@ private slots:
 
 private:
     void showMessage(const std::string &message);
+    QPixmap vertical_bar_empty;
+    QPixmap vertical_bar_full;
+    QPixmap vertical_bar_half_full;
+    QLabel* label_img_[2][AudioIoVolume::MAX_VOLUME_LEVEL];
+    bool advancedMode_ = true;
+
+    std::thread::id mainThreadId_ = std::this_thread::get_id();
 
+
+    // QObject interface
+public:
+    virtual bool event(QEvent *event) override;
 };
diff --git a/client_qt5/mainwindow.ui b/client_qt5/mainwindow.ui
index 0d63cc0..2ae1adb 100644
--- a/client_qt5/mainwindow.ui
+++ b/client_qt5/mainwindow.ui
@@ -6,10 +6,16 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>403</width>
-    <height>244</height>
+    <width>600</width>
+    <height>400</height>
    </rect>
   </property>
+  <property name="sizePolicy">
+   <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+    <horstretch>0</horstretch>
+    <verstretch>0</verstretch>
+   </sizepolicy>
+  </property>
   <property name="font">
    <font>
     <pointsize>12</pointsize>
@@ -19,335 +25,449 @@
    <string>Easy Voice Call</string>
   </property>
   <widget class="QWidget" name="centralWidget">
-   <widget class="QLabel" name="label">
+   <widget class="QGroupBox" name="groupBox_ain">
     <property name="geometry">
      <rect>
       <x>20</x>
-      <y>89</y>
-      <width>91</width>
-      <height>21</height>
+      <y>20</y>
+      <width>250</width>
+      <height>60</height>
      </rect>
     </property>
-    <property name="font">
-     <font>
-      <pointsize>18</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>Server</string>
-    </property>
-   </widget>
-   <widget class="QLineEdit" name="lineEdit_serverHost">
-    <property name="geometry">
-     <rect>
-      <x>30</x>
-      <y>116</y>
-      <width>161</width>
-      <height>25</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>14</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>127.0.0.1</string>
-    </property>
-   </widget>
-   <widget class="QPushButton" name="pushButton_connecting">
-    <property name="geometry">
-     <rect>
-      <x>220</x>
-      <y>90</y>
-      <width>171</width>
-      <height>61</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>14</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>Connect!</string>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_micInfo">
-    <property name="geometry">
-     <rect>
-      <x>190</x>
-      <y>8</y>
-      <width>191</width>
-      <height>20</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>14</pointsize>
-      <weight>75</weight>
-      <bold>true</bold>
-      <underline>false</underline>
-     </font>
-    </property>
-    <property name="autoFillBackground">
-     <bool>true</bool>
-    </property>
-    <property name="text">
-     <string/>
-    </property>
-    <property name="alignment">
-     <set>Qt::AlignCenter</set>
-    </property>
+    <property name="title">
+     <string>audio-in</string>
+    </property>
+    <widget class="QLabel" name="label_img_ain">
+     <property name="geometry">
+      <rect>
+       <x>10</x>
+       <y>30</y>
+       <width>20</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar0">
+     <property name="geometry">
+      <rect>
+       <x>50</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar1">
+     <property name="geometry">
+      <rect>
+       <x>65</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar2">
+     <property name="geometry">
+      <rect>
+       <x>80</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar3">
+     <property name="geometry">
+      <rect>
+       <x>95</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar4">
+     <property name="geometry">
+      <rect>
+       <x>110</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar5">
+     <property name="geometry">
+      <rect>
+       <x>125</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar6">
+     <property name="geometry">
+      <rect>
+       <x>140</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar7">
+     <property name="geometry">
+      <rect>
+       <x>155</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar8">
+     <property name="geometry">
+      <rect>
+       <x>170</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_ain_bar9">
+     <property name="geometry">
+      <rect>
+       <x>185</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
    </widget>
-   <widget class="QLabel" name="label_micTitle">
+   <widget class="QGroupBox" name="groupBox_aout">
     <property name="geometry">
      <rect>
       <x>20</x>
-      <y>8</y>
-      <width>71</width>
-      <height>20</height>
+      <y>100</y>
+      <width>250</width>
+      <height>60</height>
      </rect>
     </property>
-    <property name="font">
-     <font>
-      <pointsize>14</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>Mic</string>
-    </property>
+    <property name="title">
+     <string>audio-out</string>
+    </property>
+    <widget class="QLabel" name="label_img_aout">
+     <property name="geometry">
+      <rect>
+       <x>10</x>
+       <y>30</y>
+       <width>20</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar0">
+     <property name="geometry">
+      <rect>
+       <x>50</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar2">
+     <property name="geometry">
+      <rect>
+       <x>80</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar3">
+     <property name="geometry">
+      <rect>
+       <x>95</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar4">
+     <property name="geometry">
+      <rect>
+       <x>110</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar5">
+     <property name="geometry">
+      <rect>
+       <x>125</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar6">
+     <property name="geometry">
+      <rect>
+       <x>140</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar7">
+     <property name="geometry">
+      <rect>
+       <x>155</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar8">
+     <property name="geometry">
+      <rect>
+       <x>170</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar1">
+     <property name="geometry">
+      <rect>
+       <x>65</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
+    <widget class="QLabel" name="label_img_aout_bar9">
+     <property name="geometry">
+      <rect>
+       <x>185</x>
+       <y>30</y>
+       <width>10</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string/>
+     </property>
+    </widget>
    </widget>
-   <widget class="QLabel" name="label_spkTitle">
+   <widget class="QGroupBox" name="groupBox_server">
     <property name="geometry">
      <rect>
       <x>20</x>
-      <y>30</y>
-      <width>71</width>
-      <height>20</height>
+      <y>190</y>
+      <width>250</width>
+      <height>60</height>
      </rect>
     </property>
-    <property name="font">
-     <font>
-      <pointsize>14</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>Speaker</string>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_spkInfo">
-    <property name="geometry">
-     <rect>
-      <x>190</x>
-      <y>30</y>
-      <width>191</width>
-      <height>20</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>14</pointsize>
-      <weight>75</weight>
-      <bold>true</bold>
-      <underline>false</underline>
-     </font>
-    </property>
-    <property name="autoFillBackground">
-     <bool>true</bool>
-    </property>
-    <property name="text">
-     <string/>
-    </property>
-    <property name="alignment">
-     <set>Qt::AlignCenter</set>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_volumeMic">
-    <property name="geometry">
-     <rect>
-      <x>85</x>
-      <y>8</y>
-      <width>21</width>
-      <height>20</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>10</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>0</string>
-    </property>
-    <property name="alignment">
-     <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
-    </property>
+    <property name="title">
+     <string>server</string>
+    </property>
+    <widget class="QLineEdit" name="lineEdit_serverHost">
+     <property name="geometry">
+      <rect>
+       <x>10</x>
+       <y>30</y>
+       <width>160</width>
+       <height>20</height>
+      </rect>
+     </property>
+    </widget>
+    <widget class="QLineEdit" name="lineEdit_serverPort">
+     <property name="geometry">
+      <rect>
+       <x>180</x>
+       <y>30</y>
+       <width>60</width>
+       <height>20</height>
+      </rect>
+     </property>
+     <property name="text">
+      <string>80</string>
+     </property>
+    </widget>
    </widget>
-   <widget class="QLabel" name="label_volumeSpk">
-    <property name="geometry">
-     <rect>
-      <x>85</x>
-      <y>30</y>
-      <width>21</width>
-      <height>20</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>10</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>0</string>
-    </property>
-    <property name="alignment">
-     <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_9">
-    <property name="geometry">
-     <rect>
-      <x>32</x>
-      <y>142</y>
-      <width>181</width>
-      <height>17</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>10</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>example: your.server.com</string>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_10">
-    <property name="geometry">
-     <rect>
-      <x>70</x>
-      <y>158</y>
-      <width>131</width>
-      <height>17</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>10</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>or: 123.45.67.89</string>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_volumeMic_3">
-    <property name="geometry">
-     <rect>
-      <x>111</x>
-      <y>8</y>
-      <width>71</width>
-      <height>20</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>10</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>%(volume)</string>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_volumeSpk_3">
-    <property name="geometry">
-     <rect>
-      <x>111</x>
-      <y>30</y>
-      <width>71</width>
-      <height>20</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>10</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>%(volume)</string>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_vadTitle">
+   <widget class="QPushButton" name="pushButton_connecting">
     <property name="geometry">
      <rect>
       <x>20</x>
-      <y>59</y>
-      <width>71</width>
-      <height>20</height>
-     </rect>
-    </property>
-    <property name="font">
-     <font>
-      <pointsize>14</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>VAD</string>
-    </property>
-   </widget>
-   <widget class="QLabel" name="label_vad">
-    <property name="geometry">
-     <rect>
-      <x>80</x>
-      <y>59</y>
-      <width>71</width>
-      <height>20</height>
+      <y>280</y>
+      <width>250</width>
+      <height>60</height>
      </rect>
     </property>
-    <property name="font">
-     <font>
-      <pointsize>10</pointsize>
-     </font>
-    </property>
     <property name="text">
      <string/>
     </property>
-    <property name="alignment">
-     <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
-    </property>
    </widget>
-   <widget class="QCheckBox" name="checkBox_needAec">
+   <widget class="QGroupBox" name="groupBox_details">
     <property name="geometry">
      <rect>
-      <x>160</x>
-      <y>59</y>
-      <width>111</width>
-      <height>23</height>
+      <x>300</x>
+      <y>20</y>
+      <width>250</width>
+      <height>340</height>
      </rect>
     </property>
-    <property name="font">
-     <font>
-      <pointsize>14</pointsize>
-     </font>
-    </property>
-    <property name="text">
-     <string>AEC</string>
-    </property>
-    <property name="checked">
-     <bool>true</bool>
-    </property>
+    <property name="title">
+     <string>details</string>
+    </property>
+    <widget class="QGroupBox" name="groupBox_vad">
+     <property name="geometry">
+      <rect>
+       <x>10</x>
+       <y>30</y>
+       <width>231</width>
+       <height>51</height>
+      </rect>
+     </property>
+     <property name="title">
+      <string>VAD</string>
+     </property>
+     <widget class="QLabel" name="label_vad">
+      <property name="geometry">
+       <rect>
+        <x>10</x>
+        <y>28</y>
+        <width>67</width>
+        <height>17</height>
+       </rect>
+      </property>
+      <property name="text">
+       <string/>
+      </property>
+      <property name="alignment">
+       <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+      </property>
+     </widget>
+    </widget>
+    <widget class="QGroupBox" name="groupBox_aec">
+     <property name="geometry">
+      <rect>
+       <x>10</x>
+       <y>100</y>
+       <width>231</width>
+       <height>61</height>
+      </rect>
+     </property>
+     <property name="title">
+      <string>AEC</string>
+     </property>
+     <widget class="QCheckBox" name="checkBox_needAec">
+      <property name="geometry">
+       <rect>
+        <x>9</x>
+        <y>26</y>
+        <width>92</width>
+        <height>23</height>
+       </rect>
+      </property>
+      <property name="text">
+       <string>AEC</string>
+      </property>
+      <property name="checked">
+       <bool>true</bool>
+      </property>
+     </widget>
+    </widget>
+    <widget class="QTextBrowser" name="textBrowser">
+     <property name="geometry">
+      <rect>
+       <x>10</x>
+       <y>180</y>
+       <width>221</width>
+       <height>151</height>
+      </rect>
+     </property>
+    </widget>
    </widget>
   </widget>
-  <widget class="QMenuBar" name="menuBar">
-   <property name="geometry">
-    <rect>
-     <x>0</x>
-     <y>0</y>
-     <width>403</width>
-     <height>23</height>
-    </rect>
-   </property>
-  </widget>
   <widget class="QStatusBar" name="statusBar"/>
  </widget>
  <layoutdefault spacing="6" margin="11"/>
diff --git a/client_qt5/resources/Resource.qrc b/client_qt5/resources/Resource.qrc
new file mode 100644
index 0000000..e940e1b
--- /dev/null
+++ b/client_qt5/resources/Resource.qrc
@@ -0,0 +1,9 @@
+<RCC>
+    <qresource prefix="/">
+        <file>microphone.png</file>
+        <file>speaker.png</file>
+        <file>vertical_bar_empty.png</file>
+        <file>vertical_bar_full.png</file>
+        <file>vertical_bar_half_full.png</file>
+    </qresource>
+</RCC>
diff --git a/client_qt5/resources/microphone.png b/client_qt5/resources/microphone.png
new file mode 100644
index 0000000..50c8ffd
Binary files /dev/null and b/client_qt5/resources/microphone.png differ
diff --git a/client_qt5/resources/speaker.png b/client_qt5/resources/speaker.png
new file mode 100644
index 0000000..8d23354
Binary files /dev/null and b/client_qt5/resources/speaker.png differ
diff --git a/client_qt5/resources/vertical_bar_empty.png b/client_qt5/resources/vertical_bar_empty.png
new file mode 100644
index 0000000..d478941
Binary files /dev/null and b/client_qt5/resources/vertical_bar_empty.png differ
diff --git a/client_qt5/resources/vertical_bar_full.png b/client_qt5/resources/vertical_bar_full.png
new file mode 100644
index 0000000..8ca5725
Binary files /dev/null and b/client_qt5/resources/vertical_bar_full.png differ
diff --git a/client_qt5/resources/vertical_bar_half_full.png b/client_qt5/resources/vertical_bar_half_full.png
new file mode 100644
index 0000000..2b8a8c1
Binary files /dev/null and b/client_qt5/resources/vertical_bar_half_full.png differ
diff --git a/include/evc/AudioVolume.hpp b/include/evc/AudioVolume.hpp
index 846ec14..1edc243 100644
--- a/include/evc/AudioVolume.hpp
+++ b/include/evc/AudioVolume.hpp
@@ -4,18 +4,18 @@
 class AudioVolume {
 public:
     // mono
-    virtual uint8_t calculate(const std::vector<short> &buffer) = 0;
+    virtual uint8_t calculate(const std::vector<short> &buffer, const uint8_t MAX_VOLUME_LEVEL) = 0;
 };
 
 
 class SuckAudioVolume : public AudioVolume {
 public:
-    virtual uint8_t calculate(const std::vector<short> &buffer) override {
+    virtual uint8_t calculate(const std::vector<short> &buffer, const uint8_t MAX_VOLUME_LEVEL) override {
         double sum =0;
         for (const auto &sample: buffer){
             sum+=std::abs(sample);
         }
-        sum *= 100;
+        sum *= MAX_VOLUME_LEVEL;
         auto ret = sum / (1<<15) / buffer.size();
         return ret ;
     }
diff --git a/include/evc/Worker.hpp b/include/evc/Worker.hpp
index c74be61..63b4e99 100644
--- a/include/evc/Worker.hpp
+++ b/include/evc/Worker.hpp
@@ -8,6 +8,30 @@ class AudioDecoder;
 class AudioEncoder;
 class AudioDevice;
 
+
+enum class AudioInOut : uint8_t{
+    In,
+    Out
+};
+
+
+class AudioIoVolume {
+public:
+    enum { MAX_VOLUME_LEVEL = 10};
+
+    using Level = uint8_t;
+
+    AudioInOut io_;
+    Level level_;
+public:
+    AudioIoVolume(const AudioInOut io, const Level level)
+        :io_(io)
+        ,level_(level)
+    {
+
+    }
+};
+
 enum class NetworkState : unsigned char{
     Disconnected,
     Connecting,
@@ -29,8 +53,7 @@ class Worker {
     AudioDevice *  device_ = nullptr;
     bool gotoStop_ = false;
     std::shared_ptr<std::thread> netThread_ = nullptr;
-    std::function<void(const uint8_t)>  micVolumeReporter_ = nullptr;
-    std::function<void(const uint8_t)>  spkVolumeReporter_ = nullptr;
+    std::function<void(const AudioIoVolume)>  volumeReporter_ = nullptr;
     std::function<void(const bool)>  vadReporter_ = nullptr;
     bool needAec_ = false;
 public:
@@ -39,16 +62,15 @@ class Worker {
 
     bool initCodec();
     bool initDevice(std::function<void(const std::string &,const std::string &)> reportInfo,
-                    std::function<void(const uint8_t)> reportMicVolume,
-                    std::function<void(const uint8_t)> reportSpkVolume,
+                    std::function<void(const AudioIoVolume)> reportVolume,
                     std::function<void(const bool)> vadReporter
                     );
 
-    void asyncStart(const std::string &host,
+    void asyncStart(const std::string &host, const std::string &port,
                       std::function<void(const NetworkState &newState, const std::string &extraMessage)> toggleState
                       );
 
-    void syncStart(const std::string &host,
+    void syncStart(const std::string &host, const std::string &port,
                       std::function<void(const NetworkState &newState, const std::string &extraMessage)> toggleState
                       );
 
diff --git a/misc/resources/vertical_bar_empty.svg b/misc/resources/vertical_bar_empty.svg
new file mode 100644
index 0000000..c7c6170
--- /dev/null
+++ b/misc/resources/vertical_bar_empty.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="64"
+   id="svg3352"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   viewBox="0 0 30 64"
+   sodipodi:docname="vertical_bar_empty.svg">
+  <defs
+     id="defs3354" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.7781746"
+     inkscape:cx="-3.057172"
+     inkscape:cy="36.091539"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     showguides="false"
+     inkscape:window-width="1887"
+     inkscape:window-height="1056"
+     inkscape:window-x="33"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3357">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <rect
+       style="fill:#aaccff;fill-opacity:0.58181816"
+       id="rect3362"
+       width="29.636364"
+       height="63.552574"
+       x="0.17014764"
+       y="0.17938136"
+       ry="10.361831" />
+  </g>
+</svg>
diff --git a/misc/resources/vertical_bar_full.svg b/misc/resources/vertical_bar_full.svg
new file mode 100644
index 0000000..f40daf2
--- /dev/null
+++ b/misc/resources/vertical_bar_full.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="64"
+   id="svg3352"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   viewBox="0 0 30 64"
+   sodipodi:docname="vertical_bar.svg">
+  <defs
+     id="defs3354" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.7781746"
+     inkscape:cx="24.905687"
+     inkscape:cy="36.091539"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     showguides="false"
+     inkscape:window-width="1887"
+     inkscape:window-height="1056"
+     inkscape:window-x="33"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3357">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <rect
+       style="fill:#2a7fff"
+       id="rect3362"
+       width="29.636364"
+       height="63.552574"
+       x="0.17014764"
+       y="0.17938136"
+       ry="10.361831" />
+  </g>
+</svg>
diff --git a/misc/resources/vertical_bar_half_full.svg b/misc/resources/vertical_bar_half_full.svg
new file mode 100644
index 0000000..514d732
--- /dev/null
+++ b/misc/resources/vertical_bar_half_full.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="64"
+   id="svg3352"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   viewBox="0 0 30 64"
+   sodipodi:docname="vertical_bar_half_full.svg">
+  <defs
+     id="defs3354" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.7781746"
+     inkscape:cx="24.905687"
+     inkscape:cy="36.091539"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     showguides="false"
+     inkscape:window-width="1887"
+     inkscape:window-height="1056"
+     inkscape:window-x="33"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3357">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <rect
+       style="fill:#5599ff"
+       id="rect3362"
+       width="29.636364"
+       height="63.552574"
+       x="0.17014764"
+       y="0.17938136"
+       ry="10.361831" />
+  </g>
+</svg>
diff --git a/server/BoostAsioTcpServer.cpp b/server/BoostAsioTcpServer.cpp
index 09ebd6f..5004509 100644
--- a/server/BoostAsioTcpServer.cpp
+++ b/server/BoostAsioTcpServer.cpp
@@ -252,16 +252,13 @@ class Server {
 
 int main(int argc, char* argv[]) {
     try {
-        int port = 1222;
+        int port = 80;
 
         // init port
         {
             if (argc == 2) {
                 port = std::atoi(argv[1]);
             }
-            else if (argc == 1){
-                port = 1222;
-            }
             else {
                 std::cerr << "Usage: EvcServer <port>\n";
                 return -1;