diff --git a/package-lock.json b/package-lock.json
index 90f9117..a469d90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3504,6 +3504,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
diff --git a/package.json b/package.json
index afe5cb7..fe4bb78 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
diff --git a/src/components/ContactInfo/ContactInfo.js b/src/components/ContactInfo/ContactInfo.js
index 4a9aef9..5032ff7 100644
--- a/src/components/ContactInfo/ContactInfo.js
+++ b/src/components/ContactInfo/ContactInfo.js
@@ -1,14 +1,15 @@
 import React from 'react';
-import './ContactInfo.css';
+import cn from './ContactInfo.module.css';
+import classNames from 'classnames/bind';
 
 const ContactInfo = () => {
   return (
     <>
-      <div className="ContactInfo">
+      <div className={cn.ContactInfo}>
     
-        <div className={`ContactInfo_Column Left`}>
+        <div className={classNames(cn.Column, cn.Column_Left)}>
           <div>
-            <p>OFFICE HOURS</p>
+            <p>Office Hours</p>
             <p>Monday 8 AM - 5 PM</p>
             <p>Tuesday 8 AM - 5 PM</p>
             <p>Wednesday 8 AM - 5 PM</p>
@@ -16,24 +17,27 @@ const ContactInfo = () => {
           </div>
         </div>
 
-        <div className={`ContactInfo_Column Middle`}>
+        <div className={classNames(cn.Column, cn.Column_Middle)}>
           <div>
-            <p>LOCATION</p>
+            <p>Location</p>
             <p>3819 NE 45th St Suite C</p>
             <p>Seattle, WA 98105</p>
+            <hr style={{visibility:"hidden"}}/>
+            <p>Contact</p>
+            <p>206-866-6466</p>
           </div>
         </div>
 
-        <div className={`ContactInfo_Column Right`}>
+        <div className={classNames(cn.Column, cn.Column_Right)}>
           <div>
-            <p>MAP</p>
+            <p>Map</p>
             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2687.2076114399465!2d-122.2885698841777!3d47.660963092213805!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5490149cab95f4f7%3A0xfbe3c5ac7551bbd7!2sBergin%20Prosthodontics!5e0!3m2!1sen!2sus!4v1590447131151!5m2!1sen!2sus" title="Bergin Prosthodontics Location"></iframe>
           </div>
         </div>
 
       </div>
       
-      <div className ="ContactInfo_Copyright">
+      <div className ={cn.Copyright}>
          © 2020 Junping Bergin PLLC, Incorporated. All Rights Reserved.
       </div>
     </>
diff --git a/src/components/ContactInfo/ContactInfo.css b/src/components/ContactInfo/ContactInfo.module.css
similarity index 85%
rename from src/components/ContactInfo/ContactInfo.css
rename to src/components/ContactInfo/ContactInfo.module.css
index 19a8a0a..91529a3 100644
--- a/src/components/ContactInfo/ContactInfo.css
+++ b/src/components/ContactInfo/ContactInfo.module.css
@@ -12,12 +12,12 @@
         text-transform: uppercase;
     }
 
-.ContactInfo_Column {
+.Column {
     padding: 16px;
     text-align: center;
 }
 
-    .ContactInfo_Column.Left {
+    .Column_Left {
         display: flex;
         justify-content: flex-end;
 
@@ -26,13 +26,13 @@
         flex-basis: 33.3333%;
     }
 
-    .ContactInfo_Column.Middle {
+    .Column_Middle {
         flex-grow: 0;
         max-width: 25%;
         flex-basis: 25%;
     }
 
-    .ContactInfo_Column.Right {
+    .Column_Right {
         display: flex;
         justify-content: flex-start;
 
@@ -41,7 +41,7 @@
         flex-basis: 33.3333%;
     }
 
-.ContactInfo_Copyright {
+.Copyright {
     font-size: 14px;
     letter-spacing: 0.02857em;
     color: white;
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
index f102800..f7c6d74 100644
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@@ -1,6 +1,6 @@
 import React from "react";
 import TabDropdown from "./TabDropdown/TabDropdown";
-import "./Navigation.css";
+import cn from  "./Navigation.module.css";
 import { AppBar, Toolbar, Button } from "@material-ui/core";
 import PhoneIcon from "@material-ui/icons/Phone";
 
@@ -8,13 +8,13 @@ const Navigation = () => {
   return (
     <AppBar position="static">
 
-      <Toolbar className="Navigation_Toolbar">
-        <PhoneIcon className = "Navigation_Phone_Icon" fontSize="small"/>
-        <p className="Navigation_Phone_Number">206-866-6466</p>
+      <Toolbar className={cn.Toolbar}>
+        <PhoneIcon className={cn.Phone_Icon} fontSize="small"/>
+        <p className={cn.Phone_Number}>206-866-6466</p>
         <Button variant="contained" color="secondary">Contact Us</Button>
       </Toolbar>
 
-      <div className="Navigation_Tab_Dropdown">
+      <div className={cn.Tab_Dropdown}>
         <TabDropdown></TabDropdown>  
       </div>
       
diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.module.css
similarity index 73%
rename from src/components/Navigation/Navigation.css
rename to src/components/Navigation/Navigation.module.css
index 3784b87..b7a9413 100644
--- a/src/components/Navigation/Navigation.css
+++ b/src/components/Navigation/Navigation.module.css
@@ -1,4 +1,4 @@
-.Navigation_Toolbar {
+.Toolbar {
     min-height: 50px !important;
     align-items: flex-start !important; 
     padding-top: 8px;
@@ -6,16 +6,16 @@
     justify-content: flex-end; 
 }
 
-.Navigation_Phone_Icon {
+.Phone_Icon {
     margin-right: 5px;
     margin-top: 8px;
 }
 
-.Navigation_Phone_Number {
+.Phone_Number {
     margin-right: 10px;
     margin-top: 7px;
 }
 
-.Navigation_Tab_Dropdown {
+.Tab_Dropdown {
     overflow: hidden !important;
 }
\ No newline at end of file
diff --git a/src/components/Navigation/TabDropdown/TabDropdown.css b/src/components/Navigation/TabDropdown/TabDropdown.css
deleted file mode 100644
index 861d309..0000000
--- a/src/components/Navigation/TabDropdown/TabDropdown.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.TabDropdown {
-    background-color: transparent !important;
-}
-
-.TabDropdown_Tab {
-    min-width: 73px !important;
-    color: white !important;
-}
\ No newline at end of file
diff --git a/src/components/Navigation/TabDropdown/TabDropdown.js b/src/components/Navigation/TabDropdown/TabDropdown.js
index 3f4a288..bb2bb18 100644
--- a/src/components/Navigation/TabDropdown/TabDropdown.js
+++ b/src/components/Navigation/TabDropdown/TabDropdown.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import "./TabDropdown.css";
+import cn from "./TabDropdown.module.css";
 import { AppBar, Paper, Tabs, Tab, Popper, MenuList, MenuItem} from "@material-ui/core";
 
 const aboutUsItems = ["Our Practice", "Meet Dr. Bergin", "Meet Our Team"];
@@ -56,7 +56,7 @@ class TabDropdown extends Component {
                 <Tab
                   key={tab.key}
                   onMouseEnter={this.showDropdown.bind(this, tab.key)}
-                  className="TabDropdown_Tab"
+                  className={cn.Tab}
                   label={tab.label}
                   aria-owns={showDropdown ? "menu-list-grow" : undefined}
                   aria-haspopup={"true"}
diff --git a/src/components/Navigation/TabDropdown/TabDropdown.module.css b/src/components/Navigation/TabDropdown/TabDropdown.module.css
new file mode 100644
index 0000000..287835a
--- /dev/null
+++ b/src/components/Navigation/TabDropdown/TabDropdown.module.css
@@ -0,0 +1,4 @@
+.Tab {
+    min-width: 73px !important;
+    color: white !important;
+}
\ No newline at end of file