diff --git a/src/main/java/seedu/address/commons/util/FileUtil.java b/src/main/java/seedu/address/commons/util/FileUtil.java
index 36cdfe6f4cd3..1fc57a5015a7 100644
--- a/src/main/java/seedu/address/commons/util/FileUtil.java
+++ b/src/main/java/seedu/address/commons/util/FileUtil.java
@@ -85,80 +85,80 @@ public static void writeToFile(Path file, String content) throws IOException {
 
     public static String getBeltIconFilePath(ColorValue color) {
         switch(color) {
-        case BLACK: return "images/belt_icon/belt-black.PNG";
-        case BLUE: return "images/belt_icon/belt-blue.PNG";
-        case BROWN: return "images/belt_icon/belt-brown.PNG";
-        case CREAM: return "images/belt_icon/belt-cream.PNG";
-        case GREEN: return "images/belt_icon/belt-green.PNG";
-        case GREY: return "images/belt_icon/belt-grey.PNG";
-        case KHAKI: return "images/belt_icon/belt-khaki.PNG";
-        case NAVY: return "images/belt_icon/belt-navy.PNG";
-        case ORANGE: return "images/belt_icon/belt-orange.PNG";
-        case PINK: return "images/belt_icon/belt-pink.PNG";
-        case PURPLE: return "images/belt_icon/belt-purple.PNG";
-        case RED: return "images/belt_icon/belt-red.PNG";
-        case WHITE: return "images/belt_icon/belt-white.PNG";
-        case YELLOW: return "images/belt_icon/belt-yellow.PNG";
+        case BLACK: return "/images/belt_icon/belt-black.PNG";
+        case BLUE: return "/images/belt_icon/belt-blue.PNG";
+        case BROWN: return "/images/belt_icon/belt-brown.PNG";
+        case CREAM: return "/images/belt_icon/belt-cream.PNG";
+        case GREEN: return "/images/belt_icon/belt-green.PNG";
+        case GREY: return "/images/belt_icon/belt-grey.PNG";
+        case KHAKI: return "/images/belt_icon/belt-khaki.PNG";
+        case NAVY: return "/images/belt_icon/belt-navy.PNG";
+        case ORANGE: return "/images/belt_icon/belt-orange.PNG";
+        case PINK: return "/images/belt_icon/belt-pink.PNG";
+        case PURPLE: return "/images/belt_icon/belt-purple.PNG";
+        case RED: return "/images/belt_icon/belt-red.PNG";
+        case WHITE: return "/images/belt_icon/belt-white.PNG";
+        case YELLOW: return "/images/belt_icon/belt-yellow.PNG";
         default: throw new IllegalArgumentException("No such color");
         }
     }
 
     public static String getBottomIconFilePath(ColorValue color) {
         switch(color) {
-        case BLACK: return "images/bottom_icon/bottom-black.PNG";
-        case BLUE: return "images/bottom_icon/bottom-blue.PNG";
-        case BROWN: return "images/bottom_icon/bottom-brown.PNG";
-        case CREAM: return "images/bottom_icon/bottom-cream.PNG";
-        case GREEN: return "images/bottom_icon/bottom-green.PNG";
-        case GREY: return "images/bottom_icon/bottom-grey.PNG";
-        case KHAKI: return "images/bottom_icon/bottom-khaki.PNG";
-        case NAVY: return "images/bottom_icon/bottom-navy.PNG";
-        case ORANGE: return "images/bottom_icon/bottom-orange.PNG";
-        case PINK: return "images/bottom_icon/bottom-pink.PNG";
-        case PURPLE: return "images/bottom_icon/bottom-purple.PNG";
-        case RED: return "images/bottom_icon/bottom-red.PNG";
-        case WHITE: return "images/bottom_icon/bottom-white.PNG";
-        case YELLOW: return "images/bottom_icon/bottom-yellow.PNG";
+        case BLACK: return "/images/bottom_icon/bottom-black.PNG";
+        case BLUE: return "/images/bottom_icon/bottom-blue.PNG";
+        case BROWN: return "/images/bottom_icon/bottom-brown.PNG";
+        case CREAM: return "/images/bottom_icon/bottom-cream.PNG";
+        case GREEN: return "/images/bottom_icon/bottom-green.PNG";
+        case GREY: return "/images/bottom_icon/bottom-grey.PNG";
+        case KHAKI: return "/images/bottom_icon/bottom-khaki.PNG";
+        case NAVY: return "/images/bottom_icon/bottom-navy.PNG";
+        case ORANGE: return "/images/bottom_icon/bottom-orange.PNG";
+        case PINK: return "/images/bottom_icon/bottom-pink.PNG";
+        case PURPLE: return "/images/bottom_icon/bottom-purple.PNG";
+        case RED: return "/images/bottom_icon/bottom-red.PNG";
+        case WHITE: return "/images/bottom_icon/bottom-white.PNG";
+        case YELLOW: return "/images/bottom_icon/bottom-yellow.PNG";
         default: throw new IllegalArgumentException("No such color");
         }
     }
 
     public static String getShoeIconFilePath(ColorValue color) {
         switch(color) {
-        case BLACK: return "images/shoes_icon/shoes-black.PNG";
-        case BLUE: return "images/shoes_icon/shoes-blue.PNG";
-        case BROWN: return "images/shoes_icon/shoes-brown.PNG";
-        case CREAM: return "images/shoes_icon/shoes-cream.PNG";
-        case GREEN: return "images/shoes_icon/shoes-green.PNG";
-        case GREY: return "images/shoes_icon/shoes-grey.PNG";
-        case KHAKI: return "images/shoes_icon/shoes-khaki.PNG";
-        case NAVY: return "images/shoes_icon/shoes-navy.PNG";
-        case ORANGE: return "images/shoes_icon/shoes-orange.PNG";
-        case PINK: return "images/shoes_icon/shoes-pink.PNG";
-        case PURPLE: return "images/shoes_icon/shoes-purple.PNG";
-        case RED: return "images/shoes_icon/shoes-red.PNG";
-        case WHITE: return "images/shoes_icon/shoes-white.PNG";
-        case YELLOW: return "images/shoes_icon/shoes-yellow.PNG";
+        case BLACK: return "/images/shoes_icon/shoes-black.PNG";
+        case BLUE: return "/images/shoes_icon/shoes-blue.PNG";
+        case BROWN: return "/images/shoes_icon/shoes-brown.PNG";
+        case CREAM: return "/images/shoes_icon/shoes-cream.PNG";
+        case GREEN: return "/images/shoes_icon/shoes-green.PNG";
+        case GREY: return "/images/shoes_icon/shoes-grey.PNG";
+        case KHAKI: return "/images/shoes_icon/shoes-khaki.PNG";
+        case NAVY: return "/images/shoes_icon/shoes-navy.PNG";
+        case ORANGE: return "/images/shoes_icon/shoes-orange.PNG";
+        case PINK: return "/images/shoes_icon/shoes-pink.PNG";
+        case PURPLE: return "/images/shoes_icon/shoes-purple.PNG";
+        case RED: return "/images/shoes_icon/shoes-red.PNG";
+        case WHITE: return "/images/shoes_icon/shoes-white.PNG";
+        case YELLOW: return "/images/shoes_icon/shoes-yellow.PNG";
         default: throw new IllegalArgumentException("No such color");
         }
     }
 
     public static String getTopIconFilePath(ColorValue color) {
         switch(color) {
-        case BLACK: return "images/top_icon/top-black.PNG";
-        case BLUE: return "images/top_icon/top-blue.PNG";
-        case BROWN: return "images/top_icon/top-brown.PNG";
-        case CREAM: return "images/top_icon/top-cream.PNG";
-        case GREEN: return "images/top_icon/top-green.PNG";
-        case GREY: return "images/top_icon/top-grey.PNG";
-        case KHAKI: return "images/top_icon/top-khaki.PNG";
-        case NAVY: return "images/top_icon/top-navy.PNG";
-        case ORANGE: return "images/top_icon/top-orange.PNG";
-        case PINK: return "images/top_icon/top-pink.PNG";
-        case PURPLE: return "images/top_icon/top-purple.PNG";
-        case RED: return "images/top_icon/top-red.PNG";
-        case WHITE: return "images/top_icon/top-white.PNG";
-        case YELLOW: return "images/top_icon/top-yellow.PNG";
+        case BLACK: return "/images/top_icon/top-black.PNG";
+        case BLUE: return "/images/top_icon/top-blue.PNG";
+        case BROWN: return "/images/top_icon/top-brown.PNG";
+        case CREAM: return "/images/top_icon/top-cream.PNG";
+        case GREEN: return "/images/top_icon/top-green.PNG";
+        case GREY: return "/images/top_icon/top-grey.PNG";
+        case KHAKI: return "/images/top_icon/top-khaki.PNG";
+        case NAVY: return "/images/top_icon/top-navy.PNG";
+        case ORANGE: return "/images/top_icon/top-orange.PNG";
+        case PINK: return "/images/top_icon/top-pink.PNG";
+        case PURPLE: return "/images/top_icon/top-purple.PNG";
+        case RED: return "/images/top_icon/top-red.PNG";
+        case WHITE: return "/images/top_icon/top-white.PNG";
+        case YELLOW: return "/images/top_icon/top-yellow.PNG";
         default: throw new IllegalArgumentException("No such color");
         }
     }
diff --git a/src/main/java/seedu/address/ui/BrowserPanel.java b/src/main/java/seedu/address/ui/BrowserPanel.java
index cf09770f24f4..f7f2a24c96a2 100644
--- a/src/main/java/seedu/address/ui/BrowserPanel.java
+++ b/src/main/java/seedu/address/ui/BrowserPanel.java
@@ -19,6 +19,13 @@
  */
 public class BrowserPanel extends UiPart<Region> {
 
+    public static final String DEFAULT_IMAGE_PATH = "/images/default_welcome_smiley_icon.png";
+    public static final String DEFAULT_NAME_LABEL = "Select an apparel";
+    public static final String DEFAULT_CLOTHING_TYPE_LABEL = "to";
+    public static final String DEFAULT_COLOR_LABEL = "display";
+    public static final String DEFAULT_USAGE_COUNT_LABEL = "an";
+    public static final String DEFAULT_STATUS_LABEL = "apparel";
+
     private static final String FXML = "BrowserPanel.fxml";
 
     private final Logger logger = LogsCenter.getLogger(getClass());
@@ -41,7 +48,8 @@ public BrowserPanel(ObservableValue<Apparel> selectedApparel) {
 
         // To prevent triggering events for typing inside the loaded Web page.
         getRoot().setOnKeyPressed(Event::consume);
-
+        // Show default screen
+        showApparelDetails(null);
         selectedApparel.addListener((observable, oldValue, newValue) -> {
             if (newValue == null) {
                 showApparelDetails(null);
@@ -51,35 +59,42 @@ public BrowserPanel(ObservableValue<Apparel> selectedApparel) {
         });
     }
 
-
     /**
      * Fill all text fields to show details about the apparel.
      * If the specified apparel is null, all text fields are cleared.
      */
-    private void showApparelDetails(Apparel apparel) {
+    public void showApparelDetails(Apparel apparel) {
 
         if (apparel == null) {
-            nameLabel.setText("Click");
-            clothingTypeLabel.setText("to");
-            colorLabel.setText("display");
-            statusLabel.setText("an");
-            usageCountLabel.setText("apparel");
+            nameLabel.setText(DEFAULT_NAME_LABEL);
+            clothingTypeLabel.setText(DEFAULT_CLOTHING_TYPE_LABEL);
+            colorLabel.setText(DEFAULT_COLOR_LABEL);
+            statusLabel.setText(DEFAULT_STATUS_LABEL);
+            usageCountLabel.setText(DEFAULT_USAGE_COUNT_LABEL);
+
+            // set to default spalsh image when the list is empty
+            Image image = new Image(getClass().getResource(DEFAULT_IMAGE_PATH).toString());
+            apparelImageView.setImage(image);
         } else {
             // Fill the image
             Image image;
             ColorValue cv = apparel.getColor().getPrimary();
             switch(apparel.getClothingType().getClothingTypeValue()) {
             case TOP:
-                image = new Image(FileUtil.getTopIconFilePath(cv));
+                image = new Image(getClass()
+                        .getResource(FileUtil.getTopIconFilePath(cv)).toString(), true);
                 break;
             case BOTTOM:
-                image = new Image(FileUtil.getBottomIconFilePath(cv));
+                image = new Image(getClass()
+                        .getResource(FileUtil.getBottomIconFilePath(cv)).toString(), true);
                 break;
             case BELT:
-                image = new Image(FileUtil.getBeltIconFilePath(cv));
+                image = new Image(getClass()
+                        .getResource(FileUtil.getBeltIconFilePath(cv)).toString(), true);
                 break;
             case SHOES:
-                image = new Image(FileUtil.getShoeIconFilePath(cv));
+                image = new Image(getClass()
+                        .getResource(FileUtil.getShoeIconFilePath(cv)).toString(), true);
                 break;
             default:
                 throw new IllegalArgumentException("No such clothing type.");
@@ -87,8 +102,6 @@ private void showApparelDetails(Apparel apparel) {
             apparelImageView.setImage(image);
 
             // Fill the labels with info from the apparel Object
-            System.out.println("apparel = " + apparel.toString());
-            System.out.println("apparel usage = " + apparel.getUsageCount());
             nameLabel.setText(apparel.getName().fullName);
             clothingTypeLabel.setText(apparel.getClothingType().toString());
             colorLabel.setText(apparel.getColor().toString());
diff --git a/src/main/resources/images/default_welcome_smiley_icon.png b/src/main/resources/images/default_welcome_smiley_icon.png
new file mode 100644
index 000000000000..e9b3812f0476
Binary files /dev/null and b/src/main/resources/images/default_welcome_smiley_icon.png differ
diff --git a/src/main/resources/view/BrowserPanel.fxml b/src/main/resources/view/BrowserPanel.fxml
index f995143217bb..a24526594233 100644
--- a/src/main/resources/view/BrowserPanel.fxml
+++ b/src/main/resources/view/BrowserPanel.fxml
@@ -2,6 +2,7 @@
 
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.SplitPane?>
+<?import javafx.scene.image.Image?>
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
@@ -9,16 +10,14 @@
 <?import javafx.scene.layout.RowConstraints?>
 <?import javafx.scene.layout.StackPane?>
 
-<?import javafx.scene.image.Image?>
-<StackPane xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
-   <SplitPane dividerPositions="0.65" orientation="HORIZONTAL" prefHeight="600.0" prefWidth="800.0">
+<StackPane xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1">
+   <SplitPane fx:id="browserApparelPane" dividerPositions="0.65" orientation="HORIZONTAL" prefHeight="600.0" prefWidth="800.0">
      <items>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
             <children>
-               <ImageView fx:id="apparelImageView" fitHeight="300.0" fitWidth="400.0" layoutX="299.0" layoutY="73.0" pickOnBounds="true" preserveRatio="true"
-										AnchorPane.leftAnchor="30.0" AnchorPane.rightAnchor="30.0" AnchorPane.topAnchor="50.0" AnchorPane.bottomAnchor="50.0" >
+               <ImageView fx:id="apparelImageView" fitWidth="500.0" layoutX="299.0" layoutY="73.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="179.64556884765625" AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="50.0">
                    <image>
-                       <Image url="/images/test.jpg"></Image>
+                       <Image url="/images/default_welcome_smiley_icon.png" />
                    </image>
                </ImageView>
             </children>
@@ -43,7 +42,7 @@
                      <Label text="COLOR:" GridPane.rowIndex="2" />
 					 <Label text="STATUS:" GridPane.rowIndex="3" />
                      <Label text="TIMES WORN:" GridPane.rowIndex="4" />
-                     <Label fx:id="nameLabel" text="Click" GridPane.columnIndex="1" />
+                     <Label fx:id="nameLabel" text="Select an apparel" GridPane.columnIndex="1" />
                      <Label fx:id="clothingTypeLabel" text="to" GridPane.columnIndex="1" GridPane.rowIndex="1" />
                      <Label fx:id="colorLabel" text="display" GridPane.columnIndex="1" GridPane.rowIndex="2" />
                      <Label fx:id="statusLabel" text="an" GridPane.columnIndex="1" GridPane.rowIndex="3" />
diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml
index eecadd15eceb..ffcf279af11a 100644
--- a/src/main/resources/view/MainWindow.fxml
+++ b/src/main/resources/view/MainWindow.fxml
@@ -13,57 +13,56 @@
 
 <fx:root type="javafx.stage.Stage" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
          title="Fashion Match" minWidth="450" minHeight="600" onCloseRequest="#handleExit">
-  <icons>
-    <Image url="@/images/address_book_32.png" />
-  </icons>
-  <scene>
-    <Scene>
-      <stylesheets>
-        <URL value="@DarkTheme.css" />
-        <URL value="@Extensions.css" />
-      </stylesheets>
+    <icons>
+        <Image url="@/images/address_book_32.png" />
+    </icons>
+    <scene>
+        <Scene>
+            <stylesheets>
+                <URL value="@DarkTheme.css" />
+                <URL value="@Extensions.css" />
+            </stylesheets>
 
-      <VBox>
-        <MenuBar fx:id="menuBar" VBox.vgrow="NEVER">
-          <Menu mnemonicParsing="false" text="File">
-            <MenuItem mnemonicParsing="false" onAction="#handleExit" text="Exit" />
-          </Menu>
-          <Menu mnemonicParsing="false" text="Help">
-            <MenuItem fx:id="helpMenuItem" mnemonicParsing="false" onAction="#handleHelp" text="Help" />
-          </Menu>
-        </MenuBar>
+            <VBox>
+                <MenuBar fx:id="menuBar" VBox.vgrow="NEVER">
+                    <Menu mnemonicParsing="false" text="File">
+                        <MenuItem mnemonicParsing="false" onAction="#handleExit" text="Exit" />
+                    </Menu>
+                    <Menu mnemonicParsing="false" text="Help">
+                        <MenuItem fx:id="helpMenuItem" mnemonicParsing="false" onAction="#handleHelp" text="Help" />
+                    </Menu>
+                </MenuBar>
 
+                <StackPane VBox.vgrow="NEVER" fx:id="commandBoxPlaceholder" styleClass="pane-with-border">
+                    <padding>
+                        <Insets top="5" right="10" bottom="5" left="10" />
+                    </padding>
+                </StackPane>
 
-        <SplitPane id="splitPane" fx:id="splitPane" dividerPositions="0.4" VBox.vgrow="ALWAYS">
-          <StackPane fx:id="browserPlaceholder" prefWidth="340" >
-            <padding>
-              <Insets top="10" right="10" bottom="10" left="10" />
-            </padding>
-          </StackPane>
+                <StackPane VBox.vgrow="NEVER" fx:id="resultDisplayPlaceholder" styleClass="pane-with-border"
+                           minHeight="250" prefHeight="250" maxHeight="250">
+                    <padding>
+                        <Insets top="5" right="10" bottom="5" left="10" />
+                    </padding>
+                </StackPane>
 
-            <VBox fx:id="personList" minWidth="340" prefWidth="340" SplitPane.resizableWithParent="false">
-                <padding>
-                    <Insets top="10" right="10" bottom="10" left="10" />
-                </padding>
-                <StackPane fx:id="personListPanelPlaceholder" VBox.vgrow="ALWAYS"/>
-            </VBox>
-        </SplitPane>
-
-          <StackPane VBox.vgrow="NEVER" fx:id="commandBoxPlaceholder" styleClass="pane-with-border">
-              <padding>
-                  <Insets top="5" right="10" bottom="5" left="10" />
-              </padding>
-          </StackPane>
+                <SplitPane id="splitPane" fx:id="splitPane" dividerPositions="0.4" VBox.vgrow="ALWAYS">
+                    <VBox fx:id="personList" minWidth="340" prefWidth="340" SplitPane.resizableWithParent="false">
+                        <padding>
+                            <Insets top="10" right="10" bottom="10" left="10" />
+                        </padding>
+                        <StackPane fx:id="personListPanelPlaceholder" VBox.vgrow="ALWAYS"/>
+                    </VBox>
 
-          <StackPane VBox.vgrow="NEVER" fx:id="resultDisplayPlaceholder" styleClass="pane-with-border"
-                     minHeight="200" prefHeight="200" maxHeight="200">
-              <padding>
-                  <Insets top="5" right="10" bottom="5" left="10" />
-              </padding>
-          </StackPane>
+                    <StackPane fx:id="browserPlaceholder" prefWidth="340" >
+                        <padding>
+                            <Insets top="10" right="10" bottom="10" left="10" />
+                        </padding>
+                    </StackPane>
+                </SplitPane>
 
-        <StackPane fx:id="statusbarPlaceholder" VBox.vgrow="NEVER" />
-      </VBox>
-    </Scene>
-  </scene>
+                <StackPane fx:id="statusbarPlaceholder" VBox.vgrow="NEVER" />
+            </VBox>
+        </Scene>
+    </scene>
 </fx:root>
diff --git a/src/test/java/guitests/guihandles/BrowserPanelHandle.java b/src/test/java/guitests/guihandles/BrowserPanelHandle.java
index bd3633af78f3..698c5d5d3dc5 100644
--- a/src/test/java/guitests/guihandles/BrowserPanelHandle.java
+++ b/src/test/java/guitests/guihandles/BrowserPanelHandle.java
@@ -1,64 +1,168 @@
 package guitests.guihandles;
 
-import java.net.URL;
-
-import guitests.GuiRobot;
-import javafx.concurrent.Worker;
 import javafx.scene.Node;
-import javafx.scene.web.WebEngine;
-import javafx.scene.web.WebView;
+import javafx.scene.control.Label;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import seedu.address.commons.core.index.Index;
+import seedu.address.ui.BrowserPanel;
 
 /**
  * A handler for the {@code BrowserPanel} of the UI.
  */
 public class BrowserPanelHandle extends NodeHandle<Node> {
 
-    public static final String BROWSER_ID = "#browser";
+    public static final String BROWSER_APPAREL_ID = "#browserApparelPane";
+
+    private static final String APPAREL_IMAGE_VIEW = "#apparelImageView";
+    private static final String NAME_LABEL = "#nameLabel";
+    private static final String CLOTHING_TYPE_LABEL = "#clothingTypeLabel";
+    private static final String COLOR_LABEL = "#colorLabel";
+    private static final String STATUS_LABEL = "#statusLabel";
+    private static final String USAGE_COUNT_LABEL = "#usageCountLabel";
 
-    private boolean isWebViewLoaded = true;
+    private Index lastRememberIndex;
+    private ImageView imageView;
+    private Label nameLabel;
+    private Label clothingTypeLabel;
+    private Label colorLabel;
+    private Label statusLabel;
+    private Label usageCountLabel;
 
-    private URL lastRememberedUrl;
+    private Image prevImage;
+    private String prevName;
+    private String prevClothingType;
+    private String prevColor;
+    private String prevStatus;
+    private String prevUsageCount;
 
     public BrowserPanelHandle(Node browserPanelNode) {
         super(browserPanelNode);
 
-        WebView webView = getChildNode(BROWSER_ID);
-        WebEngine engine = webView.getEngine();
-        new GuiRobot().interact(() -> engine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
-            if (newState == Worker.State.RUNNING) {
-                isWebViewLoaded = false;
-            } else if (newState == Worker.State.SUCCEEDED) {
-                isWebViewLoaded = true;
-            }
-        }));
+        imageView = getChildNode(APPAREL_IMAGE_VIEW);
+        nameLabel = getChildNode(NAME_LABEL);
+        clothingTypeLabel = getChildNode(CLOTHING_TYPE_LABEL);
+        colorLabel = getChildNode(COLOR_LABEL);
+        statusLabel = getChildNode(STATUS_LABEL);
+        usageCountLabel = getChildNode(USAGE_COUNT_LABEL);
+
+        prevImage = new Image(getClass().getResource(BrowserPanel.DEFAULT_IMAGE_PATH).toString(), true);
+        prevName = BrowserPanel.DEFAULT_NAME_LABEL;
+        prevClothingType = BrowserPanel.DEFAULT_CLOTHING_TYPE_LABEL;
+        prevColor = BrowserPanel.DEFAULT_COLOR_LABEL;
+        prevStatus = BrowserPanel.DEFAULT_STATUS_LABEL;
+        prevUsageCount = BrowserPanel.DEFAULT_USAGE_COUNT_LABEL;
+    }
+    /**
+     * Get the image.
+     */
+    public Image getImage() {
+        return imageView.getImage();
     }
 
     /**
-     * Returns the {@code URL} of the currently loaded page.
+     * Get the apparel name.
      */
-    public URL getLoadedUrl() {
-        return WebViewUtil.getLoadedUrl(getChildNode(BROWSER_ID));
+    public String getName() {
+        return nameLabel.getText();
     }
 
     /**
-     * Remembers the {@code URL} of the currently loaded page.
+     * Get the clothing type for the apparel.
      */
-    public void rememberUrl() {
-        lastRememberedUrl = getLoadedUrl();
+    public String getClothingType() {
+        return clothingTypeLabel.getText();
     }
 
     /**
-     * Returns true if the current {@code URL} is different from the value remembered by the most recent
-     * {@code rememberUrl()} call.
+     * Get the color of the apparel.
      */
-    public boolean isUrlChanged() {
-        return !lastRememberedUrl.equals(getLoadedUrl());
+    public String getColor() {
+        return colorLabel.getText();
     }
 
     /**
-     * Returns true if the browser is done loading a page, or if this browser has yet to load any page.
+     * Get the status of the apparel.
      */
-    public boolean isLoaded() {
-        return isWebViewLoaded;
+    public String getStatus() {
+        return statusLabel.getText();
+    }
+
+    /**
+     * Get the usage count for the apparel.
+     */
+    public String getUsageCount() {
+        return usageCountLabel.getText();
+    }
+
+    /**
+     * Remember the state of the selected apparel
+     */
+    public void rememberState() {
+        prevImage = imageView.getImage();
+        prevName = nameLabel.getText();
+        prevClothingType = clothingTypeLabel.getText();
+        prevColor = colorLabel.getText();
+        prevStatus = statusLabel.getText();
+        prevUsageCount = usageCountLabel.getText();
+    }
+
+    /**
+     * Return true if the gui changed.
+     */
+    public boolean isGuiChanged() {
+        if (imageView.getImage().getUrl().equals(prevImage.getUrl())
+                        && nameLabel.getText().equals(prevName)
+                        && clothingTypeLabel.getText().equals(prevClothingType)
+                        && colorLabel.getText().equals(prevColor)
+                        && statusLabel.getText().equals(prevStatus)
+                        && usageCountLabel.getText().equals(prevUsageCount)
+        ) {
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * Return true is default gui display default items.
+     */
+    public boolean isDefaultLoaded() {
+        if (!imageView.getImage().getUrl().equals(BrowserPanel.DEFAULT_IMAGE_PATH)) {
+            System.out.println("image view different");
+            System.out.println(imageView.getImage().getUrl() + " vs " + BrowserPanel.DEFAULT_IMAGE_PATH);
+        }
+        if (!nameLabel.getText().equals(BrowserPanel.DEFAULT_NAME_LABEL)) {
+            System.out.println("name different");
+            System.out.println(nameLabel.getText() + " vs " + BrowserPanel.DEFAULT_NAME_LABEL);
+        }
+        if (!clothingTypeLabel.getText().equals(BrowserPanel.DEFAULT_CLOTHING_TYPE_LABEL)) {
+            System.out.println("clothing type different");
+            System.out.println(clothingTypeLabel.getText() + " vs " + BrowserPanel.DEFAULT_CLOTHING_TYPE_LABEL);
+        }
+        if (!colorLabel.getText().equals(BrowserPanel.DEFAULT_COLOR_LABEL)) {
+            System.out.println("color different");
+            System.out.println(colorLabel.getText() + " vs " + BrowserPanel.DEFAULT_COLOR_LABEL);
+        }
+        if (!statusLabel.getText().equals(BrowserPanel.DEFAULT_STATUS_LABEL)) {
+            System.out.println("status different");
+            System.out.println(statusLabel.getText() + " vs " + BrowserPanel.DEFAULT_STATUS_LABEL);
+        }
+        if (!usageCountLabel.getText().equals(BrowserPanel.DEFAULT_USAGE_COUNT_LABEL)) {
+            System.out.println("usage count different");
+            System.out.println(usageCountLabel.getText() + " vs " + BrowserPanel.DEFAULT_USAGE_COUNT_LABEL);
+        }
+
+        if (imageView.getImage().getUrl().equals(new Image(BrowserPanel.DEFAULT_IMAGE_PATH).getUrl())
+                && nameLabel.getText().equals(BrowserPanel.DEFAULT_NAME_LABEL)
+                && clothingTypeLabel.getText().equals(BrowserPanel.DEFAULT_CLOTHING_TYPE_LABEL)
+                && colorLabel.getText().equals(BrowserPanel.DEFAULT_COLOR_LABEL)
+                && statusLabel.getText().equals(BrowserPanel.DEFAULT_STATUS_LABEL)
+                && usageCountLabel.getText().equals(BrowserPanel.DEFAULT_USAGE_COUNT_LABEL)
+        ) {
+            return true;
+        }
+
+        return false;
     }
 }
diff --git a/src/test/java/guitests/guihandles/MainWindowHandle.java b/src/test/java/guitests/guihandles/MainWindowHandle.java
index 34e36054f4fd..506c36c8ab82 100644
--- a/src/test/java/guitests/guihandles/MainWindowHandle.java
+++ b/src/test/java/guitests/guihandles/MainWindowHandle.java
@@ -22,7 +22,7 @@ public MainWindowHandle(Stage stage) {
         commandBox = new CommandBoxHandle(getChildNode(CommandBoxHandle.COMMAND_INPUT_FIELD_ID));
         statusBarFooter = new StatusBarFooterHandle(getChildNode(StatusBarFooterHandle.STATUS_BAR_PLACEHOLDER));
         mainMenu = new MainMenuHandle(getChildNode(MainMenuHandle.MENU_BAR_ID));
-        browserPanel = new BrowserPanelHandle(getChildNode(BrowserPanelHandle.BROWSER_ID));
+        browserPanel = new BrowserPanelHandle(getChildNode(BrowserPanelHandle.BROWSER_APPAREL_ID));
     }
 
     public PersonListPanelHandle getPersonListPanel() {
diff --git a/src/test/java/guitests/guihandles/WebViewUtil.java b/src/test/java/guitests/guihandles/WebViewUtil.java
index 99f7db998747..cbdd33fa73f9 100644
--- a/src/test/java/guitests/guihandles/WebViewUtil.java
+++ b/src/test/java/guitests/guihandles/WebViewUtil.java
@@ -3,7 +3,6 @@
 import java.net.MalformedURLException;
 import java.net.URL;
 
-import guitests.GuiRobot;
 import javafx.scene.web.WebView;
 
 /**
@@ -26,6 +25,6 @@ public static URL getLoadedUrl(WebView webView) {
      * If the {@code browserPanelHandle}'s {@code WebView} is loading, sleeps the thread till it is successfully loaded.
      */
     public static void waitUntilBrowserLoaded(BrowserPanelHandle browserPanelHandle) {
-        new GuiRobot().waitForEvent(browserPanelHandle::isLoaded);
+        //new GuiRobot().waitForEvent(browserPanelHandle::isLoaded);
     }
 }
diff --git a/src/test/java/seedu/address/ui/BrowserPanelTest.java b/src/test/java/seedu/address/ui/BrowserPanelTest.java
index 3ba86a853437..dbe96101a8e1 100644
--- a/src/test/java/seedu/address/ui/BrowserPanelTest.java
+++ b/src/test/java/seedu/address/ui/BrowserPanelTest.java
@@ -1,10 +1,6 @@
 package seedu.address.ui;
 
-import static guitests.guihandles.WebViewUtil.waitUntilBrowserLoaded;
-import static org.junit.Assert.assertEquals;
-import static seedu.address.testutil.TypicalApparels.SHIRT1;
-
-import java.net.URL;
+import static org.junit.Assert.assertTrue;
 
 import org.junit.Before;
 import org.junit.Test;
@@ -28,15 +24,7 @@ public void setUp() {
 
     @Test
     public void display() throws Exception {
-        // default web page
-        assertEquals(BrowserPanel.DEFAULT_PAGE, browserPanelHandle.getLoadedUrl());
-
-        // associated web page of a apparel
-        guiRobot.interact(() -> selectedPerson.set(SHIRT1));
-        URL expectedPersonUrl = new URL(BrowserPanel.SEARCH_PAGE_URL
-                + SHIRT1.getName().fullName.replaceAll(" ", "%20"));
-
-        waitUntilBrowserLoaded(browserPanelHandle);
-        assertEquals(expectedPersonUrl, browserPanelHandle.getLoadedUrl());
+        // default page
+        assertTrue(browserPanelHandle.isDefaultLoaded());
     }
 }
diff --git a/src/test/java/systemtests/AddCommandSystemTest.java b/src/test/java/systemtests/AddCommandSystemTest.java
index 0e17843c96da..3ed3fc411729 100644
--- a/src/test/java/systemtests/AddCommandSystemTest.java
+++ b/src/test/java/systemtests/AddCommandSystemTest.java
@@ -50,6 +50,7 @@ public void add() {
         Apparel toAdd = ARMANY;
         String command = "   " + AddCommand.COMMAND_WORD + "  " + INPUT_NAME_A + "  " + INPUT_COLOR_GREEN + " "
                 + INPUT_TYPE_TOP + " ";
+
         assertCommandSuccess(command, toAdd);
 
         /* Case: undo adding Amy to the list -> Amy deleted */
@@ -207,6 +208,7 @@ private void assertCommandSuccess(String command, Apparel toAdd) {
     private void assertCommandSuccess(String command, Model expectedModel, String expectedResultMessage) {
         executeCommand(command);
         assertApplicationDisplaysExpected("", expectedResultMessage, expectedModel);
+        getBrowserPanel().rememberState();
         assertSelectedCardUnchanged();
         assertCommandBoxShowsDefaultStyle();
         assertStatusBarUnchangedExceptSyncStatus();
diff --git a/src/test/java/systemtests/AddressBookSystemTest.java b/src/test/java/systemtests/AddressBookSystemTest.java
index da56ff1febfd..2c6e948fb729 100644
--- a/src/test/java/systemtests/AddressBookSystemTest.java
+++ b/src/test/java/systemtests/AddressBookSystemTest.java
@@ -171,6 +171,10 @@ protected void deleteAllPersons() {
     protected void assertApplicationDisplaysExpected(String expectedCommandInput, String expectedResultMessage,
             Model expectedModel) {
         assertEquals(expectedCommandInput, getCommandBox().getInput());
+        System.out.println("expected command input = " + expectedCommandInput);
+        System.out.println("expected result message = " + expectedResultMessage);
+        System.out.println("expected model = " + expectedModel);
+        System.out.println("result display text = " + getResultDisplay().getText());
         assertEquals(expectedResultMessage, getResultDisplay().getText());
         assertEquals(new AddressBook(expectedModel.getAddressBook()), testApp.readStorageAddressBook());
         assertListMatching(getPersonListPanel(), expectedModel.getFilteredApparelList());
@@ -181,8 +185,8 @@ protected void assertApplicationDisplaysExpected(String expectedCommandInput, St
      * their current state.
      */
     private void rememberStates() {
+        getBrowserPanel().rememberState();
         StatusBarFooterHandle statusBarFooterHandle = getStatusBarFooter();
-        getBrowserPanel().rememberUrl();
         statusBarFooterHandle.rememberSaveLocation();
         statusBarFooterHandle.rememberSyncStatus();
         getPersonListPanel().rememberSelectedPersonCard();
@@ -191,42 +195,35 @@ private void rememberStates() {
     /**
      * Asserts that the previously selected card is now deselected and the browser's url is now displaying the
      * default page.
-     * @see BrowserPanelHandle#isUrlChanged()
+     * @see BrowserPanelHandle#isGuiChanged()
      */
     protected void assertSelectedCardDeselected() {
+        assertTrue(getBrowserPanel().isGuiChanged());
         assertFalse(getPersonListPanel().isAnyCardSelected());
     }
 
     /**
      * Asserts that the browser's url is changed to display the details of the apparel in the apparel list panel at
      * {@code expectedSelectedCardIndex}, and only the card at {@code expectedSelectedCardIndex} is selected.
-     * @see BrowserPanelHandle#isUrlChanged()
+     * @see BrowserPanelHandle#isGuiChanged()
      * @see PersonListPanelHandle#isSelectedPersonCardChanged()
      */
-    /**
     protected void assertSelectedCardChanged(Index expectedSelectedCardIndex) {
         getPersonListPanel().navigateToCard(getPersonListPanel().getSelectedCardIndex());
         String selectedCardName = getPersonListPanel().getHandleToSelectedCard().getName();
-        URL expectedUrl;
-        try {
-            expectedUrl = new URL(BrowserPanel.SEARCH_PAGE_URL + selectedCardName.replaceAll(" ", "%20"));
-        } catch (MalformedURLException mue) {
-            throw new AssertionError("URL expected to be valid.", mue);
-        }
-        assertEquals(expectedUrl, getBrowserPanel().getLoadedUrl());
+        assertTrue(getBrowserPanel().isGuiChanged());
 
         assertEquals(expectedSelectedCardIndex.getZeroBased(), getPersonListPanel().getSelectedCardIndex());
     }
-     */
 
     /**
      * Asserts that the browser's url and the selected card in the apparel list panel remain unchanged.
-     * @see BrowserPanelHandle#isUrlChanged()
+     * @see BrowserPanelHandle#isGuiChanged()
      * @see PersonListPanelHandle#isSelectedPersonCardChanged()
      */
     protected void assertSelectedCardUnchanged() {
-        assertFalse(getBrowserPanel().isUrlChanged());
         assertFalse(getPersonListPanel().isSelectedPersonCardChanged());
+        assertFalse(getBrowserPanel().isGuiChanged());
     }
 
     /**
@@ -271,8 +268,7 @@ private void assertApplicationStartingStateIsCorrect() {
         assertEquals("", getCommandBox().getInput());
         assertEquals("", getResultDisplay().getText());
         assertListMatching(getPersonListPanel(), getModel().getFilteredApparelList());
-        // TODO, write test for BrowserPanel
-        //assertEquals(BrowserPanel.DEFAULT_PAGE, getBrowserPanel().getLoadedUrl());
+        assertTrue(getBrowserPanel().isDefaultLoaded());
         assertEquals(Paths.get(".").resolve(testApp.getStorageSaveLocation()).toString(),
                 getStatusBarFooter().getSaveLocation());
         assertEquals(SYNC_STATUS_INITIAL, getStatusBarFooter().getSyncStatus());
diff --git a/src/test/java/systemtests/HelpCommandSystemTest.java b/src/test/java/systemtests/HelpCommandSystemTest.java
index 3f1258ca9dc2..7cfed7cbd5b8 100644
--- a/src/test/java/systemtests/HelpCommandSystemTest.java
+++ b/src/test/java/systemtests/HelpCommandSystemTest.java
@@ -14,7 +14,6 @@
 import seedu.address.logic.commands.DeleteCommand;
 import seedu.address.logic.commands.HelpCommand;
 import seedu.address.logic.commands.SelectCommand;
-import seedu.address.ui.BrowserPanel;
 import seedu.address.ui.StatusBarFooter;
 
 /**
@@ -64,7 +63,6 @@ public void openHelpWindow() {
         assertEquals("", getCommandBox().getInput());
         assertCommandBoxShowsDefaultStyle();
         assertNotEquals(HelpCommand.SHOWING_HELP_MESSAGE, getResultDisplay().getText());
-        assertNotEquals(BrowserPanel.DEFAULT_PAGE, getBrowserPanel().getLoadedUrl());
         assertListMatching(getPersonListPanel(), getModel().getFilteredApparelList());
 
         // assert that the status bar too is updated correctly while the help window is open