diff --git a/src/components/ChapterLink.tsx b/src/components/ChapterLink.tsx
index 86324bec6..8b50f160b 100644
--- a/src/components/ChapterLink.tsx
+++ b/src/components/ChapterLink.tsx
@@ -57,14 +57,17 @@ const ChapterLink: React.SFC<Props> = ({ chapter }: Props) => (
           {chapter.chapterNumber}
         </TableItem>
         <TableItem width={7 / 12}>{chapter.nameSimple}</TableItem>
-        <TableItem width={3 / 12} className="text-left">
+        <TableItem width={3 / 12}>
           <Arabic>
             <ChapterIcon id={String(chapter.id)} />
           </Arabic>
         </TableItem>
       </Table>
+
       <Translated>
-        <span className={`text-uppercase ${''}`}>
+        <span
+          className={`text-uppercase ${chapter.translatedName.languageName}`}
+        >
           {chapter.translatedName.name}
         </span>
       </Translated>
diff --git a/src/components/JuzDecoration.tsx b/src/components/JuzDecoration.tsx
index 5fcbac0d3..271b05433 100644
--- a/src/components/JuzDecoration.tsx
+++ b/src/components/JuzDecoration.tsx
@@ -40,7 +40,7 @@ type Props = {
 
 const JuzDecoration: React.SFC<Props> = ({ juzNumber }: Props) => (
   <Fragment>
-    <StyledJuzArt src={juzMarkTop} alt="juz top Art" />
+    <StyledJuzArt src={juzMarkTop} alt={`Juz ${juzNumber}`} />
     <StyledContainer>
       <StyledJuzNumber>جزء</StyledJuzNumber>
       <StyledJuzNumber>
@@ -51,7 +51,7 @@ const JuzDecoration: React.SFC<Props> = ({ juzNumber }: Props) => (
         {JUZ_AND_HIZB_ARABIC_NUMBERS[juzNumber * 2 - 1]}
       </StyledJuzNumber>
     </StyledContainer>
-    <StyledJuzArt src={juzMarkBottom} alt="juz top Art" />
+    <StyledJuzArt src={juzMarkBottom} alt={`Juz ${juzNumber}`} />
   </Fragment>
 );
 
diff --git a/src/components/JuzLink.tsx b/src/components/JuzLink.tsx
index 1d8d9bd5d..05c97a83c 100644
--- a/src/components/JuzLink.tsx
+++ b/src/components/JuzLink.tsx
@@ -4,6 +4,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { JUZ_LIST_EVENTS } from '../events';
 import { ChapterShape } from '../shapes';
 import JuzShape from '../shapes/JuzShape';
+import ChapterIcon from './ChapterIcon';
 
 const Name = styled.span`
   margin-right: 5px;
@@ -16,7 +17,6 @@ const Arabic = styled.div`
 
 const Translated = styled.div`
   font-size: 10px;
-  color: #777;
 `;
 
 const Link = styled(RouterLink)`
@@ -28,6 +28,17 @@ const Link = styled(RouterLink)`
   }
 `;
 
+const Table = styled.div`
+  display: table;
+  width: 100%;
+`;
+
+const TableItem = styled.div<{ width: number }>`
+  display: table-cell;
+  vertical-align: middle;
+  width: ${({ width }) => `${width * 100}%`};
+`;
+
 type Props = {
   juz: JuzShape;
   chapters: { [id: string]: ChapterShape };
@@ -43,23 +54,30 @@ const JuzLink: React.SFC<Props> = ({ juz, chapters }: Props) => {
         className="row"
         {...JUZ_LIST_EVENTS.CLICK.JUZ_LINK.PROPS}
       >
-        <div className="col-xs-9">
-          <Name>{chapters[chapterId].nameSimple}</Name>
+        <Table>
+          <TableItem width={9 / 12}>
+            <Name>{chapters[chapterId].nameSimple}</Name>
 
-          <span className="h5">
-            <small>{juz.verseMapping[chapterId]}</small>
-          </span>
-        </div>
-        <Arabic className="col-xs-3 text-left">
-          <span className={`icon-surah${chapters[chapterId].id}`} />
-        </Arabic>
+            <span className="h5">
+              <small>{juz.verseMapping[chapterId]}</small>
+            </span>
+          </TableItem>
+
+          <TableItem width={3 / 12}>
+            <Arabic>
+              <ChapterIcon id={String(chapterId)} />
+            </Arabic>
+          </TableItem>
+        </Table>
 
-        <Translated
-          className={`col-xs-10 text-uppercase ${
-            chapters[chapterId].languageName
-          }`}
-        >
-          <small>{chapters[chapterId].translatedName.name}</small>
+        <Translated>
+          <span
+            className={`text-uppercase ${
+              chapters[chapterId].translatedName.languageName
+            }`}
+          >
+            {chapters[chapterId].translatedName.name}
+          </span>
         </Translated>
       </Link>
     </Translated>
diff --git a/src/components/JuzMarker.tsx b/src/components/JuzMarker.tsx
index 41948daa3..36a0c81d7 100644
--- a/src/components/JuzMarker.tsx
+++ b/src/components/JuzMarker.tsx
@@ -1,11 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Tooltip } from 'react-tippy';
 import { JUZ_START } from '../constants';
 import JuzDecoration from './JuzDecoration';
 import { VerseShape } from '../shapes';
-import T, { KEYS } from './T';
 
 const StyledAyah = styled.div`
   margin-top: 3%;
@@ -29,18 +27,9 @@ export const JuzMarker: React.SFC<Props> = ({
     return (
       <Fragment>
         <b className="col-xs-1">
-          <Tooltip
-            arrow
-            title={
-              <T
-                id={KEYS.JUZ_INDEX_HEADING}
-                values={{ juzNumber: `${juzNumber}` }}
-              />
-            }
-          >
-            <JuzDecoration juzNumber={juzNumber} />
-          </Tooltip>
+          <JuzDecoration juzNumber={juzNumber} />
         </b>
+
         <StyledAyah className="col-xs-11">
           <span>{text}</span>
         </StyledAyah>
diff --git a/src/components/T.tsx b/src/components/T.tsx
index fb36d75aa..a30f6726a 100644
--- a/src/components/T.tsx
+++ b/src/components/T.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import {
   injectIntl,
+  intlShape,
   FormattedMessage,
   InjectedIntlProps, // eslint-disable-line
 } from 'react-intl';
@@ -11,6 +12,7 @@ import LOCALE_KEYS from '../locale/keys';
 type Props = {
   id: LOCALE_KEYS;
   values?: { [key: string]: string };
+  intl?: $TsFixMe;
   children?: (...formattedMessage: Array<string | JSX.Element>) => ReactNode;
 };
 
@@ -20,14 +22,18 @@ const T: React.SFC<Props> = ({
   id,
   values,
   children,
+  intl,
 }: Props & InjectedIntlProps) => (
-  <FormattedMessage id={id} defaultMessage={en.messages[id]} values={values}>
-    {children}
-  </FormattedMessage>
+  <span className={`${intl.messages.local}`}>
+    <FormattedMessage id={id} defaultMessage={en.messages[id]} values={values}>
+      {children}
+    </FormattedMessage>
+  </span>
 );
 
 T.propTypes = {
   id: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
   values: PropTypes.object, // eslint-disable-line
   children: PropTypes.node, // eslint-disable-line
 };
diff --git a/src/components/Word.tsx b/src/components/Word.tsx
index 543f36250..fd8bc2b19 100644
--- a/src/components/Word.tsx
+++ b/src/components/Word.tsx
@@ -96,6 +96,17 @@ class Word extends Component<Props> {
     return title;
   };
 
+  getLanguageName = () => {
+    const { word, tooltip } = this.props;
+    const content = word[tooltip];
+
+    if (content) {
+      return content.languageName;
+    }
+
+    return '';
+  };
+
   handleWordPlay = () => {
     const { word } = this.props;
 
@@ -143,6 +154,7 @@ class Word extends Component<Props> {
     const className = `${useTextFont ? 'text-' : ''}${word.className} ${
       word.charType
     } ${word.highlight ? word.highlight : ''}`;
+
     const id = `word-${(verseKey || '').replace(/:/, '-')}-${audioPosition}`;
 
     if (useTextFont) {
@@ -155,12 +167,19 @@ class Word extends Component<Props> {
       text = word.code;
     }
 
+    const tooltipText = this.getTooltipTitle();
+    const tooltipHtml = (
+      <div className={this.getLanguageName()}>{tooltipText}</div>
+    );
+
     return (
       <span>
         <Tooltip
           arrow
+          interactive
+          title={tooltipText}
+          html={tooltipHtml}
           style={{ position: 'relative', float: 'right', overflow: 'hidden' }}
-          title={this.getTooltipTitle()}
         >
           <WordWrap
             role="button"
diff --git a/src/server/index.js b/src/server/index.js
index f11538a2c..19efd8ebf 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -96,6 +96,8 @@ const listener = app.listen(config('port'), () =>
     ).join(', ')})
 
       Server is now listening on Port ${config('port')}
+      API URL ${config('api')}
+      
       You can access it in the browser at http://${config('host')}:${config(
       'port'
     )}