Hi Sukhenhu,
There is likely to be a thread (or numerous) on this board explaining how to customise CSS, which is what you need to do to tweak the default NetTalk layout, which someone might be point out.
Meanwhile, i'll quickly explain the process.
1. Use a programmers browser (Chrome or Firefox with Firebug installed). Both of these will allow you to edit the CSS realtime and see the results without mucking around in your app or compiling.
2. Create your own CSS file and add it to the app (in extensions for your main procedure under style|files). Later you'll put your changes in here. It will override the default NetTalk ones.
3. Experiment. Right click and "Inspect Element" on the fields you'd like to change. All HTML (and CSS) is a hierarchy so you'll often have to look up and down the HTML and CSS to find the right place, but frankly you can pretty much guess. Edit the values for padding, margin, they'll be your most common CSS elements for spacing around things. After you have experimented, duplicate your CSS changes into your own CSS file and Force a page refresh and those settings will then be used.
To get you started, i'll paste some of my CSS below, if you add it to your CSS file, stuff should change (maybe not for the better, but it might fast track things for you):
.nt-left {margin-right: 0px;}
.FormTable td {padding: 1px 4px; }
.is-dropdown { height: 24px; font-size: 11px; margin: 2px 0px 0px 0px; padding: 0px; } /* fixes drop down height issue in FF */
.MainButton { border: solid 1px #888; background: #ddd; padding: 3px 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 12px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; color: black; }
.MainButton:hover {background: #1ea85a; color: #ffffff; }
.MainButton:active { background: #1b435e; }
.ui-dialog {border-radius: 4px 4px 4px 4px; box-shadow: 8px 8px 4px #666666; }
.ui-dialog .ui-dialog-titlebar {background:#E3004B; color:white;}
.ui-tab-small a {padding: 0.15em 0.5em !important; cursor: pointer !important;}
.nt-browse-table-small {padding: 0 !important; margin: 0 !important; }
.ui-datepicker-trigger {margin-top:6px;}
.form-subheading {margin-top: 5px; margin-bottom: 5px; padding-left: 0px; text-align: left; font-weight: bold; border-bottom: 1px solid #E3004B; }
.nt-browse-table-footer {font-weight: bold; font-size: 1em; }
.nt-prompt {margin-top: 4px;}
.nt-browse-table th {font-size: 1em; font-weight: normal; padding: 0 2px 0 2px; }
.ui-widget-header { background:#FFF6E8; border:1px solid #E78F08; color:#000; font-weight:bold; }
.ui-widget-header a { color: black; }
.nt-form-table { border:0 none; border-collapse:collapse; margin: 0px; padding:4px; text-align:left; }
.nt-form-table td { border: 0 none; font-weight: normal; padding: 0 0 0 0; }
.nt-browse-table td { border-color:#EEEEEE #EEEEEE #CCCCCC #AAAAAA; border-style:solid; border-width:1px 1px 1px 0; padding-left:3px; padding-right:3px; }
.nt-header { padding: 10px 0; color: black; font-size:1.8em;}
.adiv { margin-right: 0px; }
.ui-widget { font-family:Tahoma,Verdana,Arial,sans-serif; font-size:1.1em; }
.prompt-indent { margin-left: 220px; float: left; margin-right: 10px; }
.comment-indent { color: #444444; position: relative; top: 4px; height: 0px; }
.nt-width-99 {width: 94%; }
.ui-widget-content {background: white; border: 0; }
.nt-tab-title {font-size: 1em;}
.ui-tabs .ui-tabs-panel {border-left: 1px solid #E3004B; border-right: 1px solid #E3004B; border-bottom: 1px solid #E3004B; }
.ui-tabs .ui-tabs-nav {border-bottom: 1px solid #E3004B; background: white; border-top: 0; border-left: 0; border-right: 0;}
.ui-tabs .ui-tabs-nav {margin: 0; padding: 0;}
.nt-formcell {padding: 0 4px 0 0;}
.ui-widget-header .ui-state-default {font-weight: normal; background: white;}
.ui-widget-header .ui-state-default :hover {background: #ccc;}
.ui-widget-header .ui-state-inactive {background: white;}
.ui-widget-header .ui-state-active {font-weight: bold; background: #E3004B; border: 1px solid #E3004B; }
.ui-widget-header .ui-state-active a {color: white;}
.ui-widget-header .ui-state-active a:visited, .ui-widget-header .ui-state-active a:link, .ui-widget-header .ui-state-active a:hover {color: white;}
.ui-tabs .ui-tabs-nav li a {padding: 0.3em 1em;}
.ui-tabs .ui-tabs-nav li a:hover {color:white; text-decoration: underline;}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {color: #333;}
Maybe this will help! Maybe it will make it worse, but at the least if should show you what is possible.
Regards
Bill