diff --git a/src/App.vue b/src/App.vue
index 47bbda6..8cbce8d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ Description: App.vue is the main parent component of the entire client side appl
 -->
 
 <template>
-  <div id="app">
+  <div id="app" :class="{ 'dark-mode': $store.state.darkMode }">
     <nav-bar />
     <div class="main-content-wrapper nav-active">
       <side-nav />
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index dbd97cc..5e006de 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -40,7 +40,16 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  color: #919191;
+}
+
+.dark-mode .view{
+  background-color: #050505a1;
+  color: #fff;
+}
+
+:root .dark-mode .body{
+  color: black !important;
 }
 
 .input-field {
diff --git a/src/components/UploadModal.vue b/src/components/UploadModal.vue
new file mode 100644
index 0000000..67c1273
--- /dev/null
+++ b/src/components/UploadModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="modal-wrapper">
+    <div class="modal">
+      <span class="close" @click="closeUploadModal">&times;</span>
+      <slot></slot>
+    </div>
+    <div class="overlay" @click="closeUploadModal"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    closeUploadModal() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  max-width: 80%;
+  max-height: 80%;
+  overflow: auto;
+  position: relative;
+  z-index: 1001;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 8px;
+  cursor: pointer;
+  font-size: 24px;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.modal-content {
+  padding: 20px;
+}
+
+/* Add more specific styles for your file input */
+input[type='file'] {
+  margin: 10px 0;
+}
+</style>
diff --git a/src/components/VcfImport.vue b/src/components/VcfImport.vue
new file mode 100644
index 0000000..95c1d67
--- /dev/null
+++ b/src/components/VcfImport.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="vcf-import">
+    <!-- <button class="import-title" @click="openUploadModal">Import VCF</button> -->
+    <!-- Tried to use below component to render a modal but there is some issue, Need more time to debug -->
+    <UploadModal v-if="showModal" @close="closeUploadModal"> </UploadModal>
+    <label class="label">Upload a file(.vcf) below to generate QR code :</label>
+    <input type="file" @change="handleFileUpload" accept=".vcf" />
+    <div v-if="vcfData">
+      <qrcode class="qrcode" :value="vcfData" :scale="10" />
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadModal from '@/components/UploadModal.vue' // Create a Modal component
+import VueQrcode from 'vue-qrcode' // Import the qrcode library
+
+export default {
+  name: 'VcfImport',
+  components: {
+    UploadModal,
+    qrcode: VueQrcode
+  },
+  data() {
+    return {
+      showModal: false,
+      vcfData: null
+    }
+  },
+  methods: {
+    openUploadModal() {
+      this.showModal = true
+    },
+    closeUploadModal() {
+      this.showModal = false
+      this.vcfData = null
+    },
+    handleFileUpload(event) {
+      const file = event.target.files[0]
+      if (file) {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          this.vcfData = e.target.result
+          this.generateQRCode(this.vcfData) // Generate QR code
+        }
+        reader.readAsText(file)
+      }
+    },
+    async generateQRCode(data) {
+      try {
+        const qrDataURL = await VueQrcode.toDataURL(data) // Generate QR code URL
+        this.vcfData = qrDataURL
+      } catch (error) {
+        console.error('QR code generation failed:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vcf-import {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.vcf-import .import-title {
+  font-size: large;
+}
+.dark-mode .vcf-import {
+  color: black;
+}
+.qrcode {
+  @apply relative;
+}
+
+.label {
+  font-size: large;
+  font-weight: 500;
+}
+</style>
diff --git a/src/components/icons/NetworkAwarenessLogo.vue b/src/components/icons/NetworkAwarenessLogo.vue
new file mode 100644
index 0000000..9d9b05b
--- /dev/null
+++ b/src/components/icons/NetworkAwarenessLogo.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="#000000"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      :fill="color"
+      d="M14 14.252V22H4a8 8 0 0 1 10-7.748zM12 13c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm6 4v-3h2v3h3v2h-3v3h-2v-3h-3v-2h3z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'NetworkAwarenessLogo'
+}
+</script>
diff --git a/src/components/partials/SideNav.vue b/src/components/partials/SideNav.vue
index 09ff123..9e1b422 100644
--- a/src/components/partials/SideNav.vue
+++ b/src/components/partials/SideNav.vue
@@ -21,6 +21,12 @@
       </span>
       <span class="link-text">Settings</span>
     </router-link>
+    <router-link v-ripple to="/network-awareness">
+      <span class="icon1">
+        <network-awareness-logo :color="pathColor('settings')" />
+      </span>
+      <span class="link-text">Network Awareness</span>
+    </router-link>
   </aside>
 </template>
 
@@ -30,13 +36,15 @@ import { mapGetters } from 'vuex'
 import FilesIcon from '../icons/Files.vue'
 import SettingsIcon from '../icons/Settings.vue'
 import WalletIcon from '../icons/Wallet.vue'
+import NetworkAwarenessLogo from '../icons/NetworkAwarenessLogo.vue'
 
 export default {
   name: 'SideNav',
   components: {
     FilesIcon,
     SettingsIcon,
-    WalletIcon
+    WalletIcon,
+    NetworkAwarenessLogo
   },
   computed: {
     ...mapGetters(['menuType'])
@@ -95,6 +103,10 @@ export default {
     width: max-content;
   }
 }
+
+.icon1 {
+  margin-bottom: -23px;
+}
 .micro {
   a {
     .link-text {
diff --git a/src/components/reusables/ToggleButton.vue b/src/components/reusables/ToggleButton.vue
new file mode 100644
index 0000000..a5fe790
--- /dev/null
+++ b/src/components/reusables/ToggleButton.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <label class="label">Switch to dark / light mode</label>
+    <button
+      class="toggle-button"
+      :class="{ active: isActive }"
+      @click="toggleDarkMode"
+    >
+      <span class="toggle-text">{{
+        isActive ? activeText : inactiveText
+      }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    activeText: String,
+    inactiveText: String,
+    value: Boolean
+  },
+  computed: {
+    isActive() {
+      return this.value
+    }
+  },
+  methods: {
+    toggleDarkMode() {
+      this.$store.commit('toggleDarkMode') // Emit an input event to update the parent's value
+    }
+  }
+}
+</script>
+
+<style scoped>
+.label {
+  padding-right: 15px;
+}
+.dark-mode .label {
+  color: black;
+  padding-right: 15px;
+}
+.toggle-button {
+  background-color: #ccc;
+  border: none;
+  border-radius: 20px;
+  padding: 5px 15px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.toggle-button.active {
+  background-color: #3182ce; /* Active color */
+  color: white;
+}
+
+.toggle-text {
+  margin-left: 5px;
+}
+</style>
diff --git a/src/components/settings/EmailSettings.vue b/src/components/settings/EmailSettings.vue
index 965b356..677598a 100644
--- a/src/components/settings/EmailSettings.vue
+++ b/src/components/settings/EmailSettings.vue
@@ -4,8 +4,8 @@
       <div class="col-md-9 mb-3">
         <p class="text-xl">Email Configuration</p>
         <small class="text-muted">
-          Fill-out This Form to Setup Your Email Configuration on Your Sparkplate
-          Account.
+          Fill-out This Form to Setup Your Email Configuration on Your
+          Sparkplate Account.
         </small>
       </div>
     </div>
@@ -191,4 +191,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+.dark-mode .row {
+  color: black;
+}
+</style>
diff --git a/src/components/settings/InterfaceSettings.vue b/src/components/settings/InterfaceSettings.vue
new file mode 100644
index 0000000..e145ba3
--- /dev/null
+++ b/src/components/settings/InterfaceSettings.vue
@@ -0,0 +1,54 @@
+<!-- This component is a page to toggle Dark mode for the entire application -->
+<template>
+  <div>
+    <ToggleButton
+      v-model="darkMode"
+      activeText="Dark Mode"
+      inactiveText="Light Mode"
+    />
+  </div>
+</template>
+
+<script>
+import ToggleButton from '../../components/reusables/ToggleButton.vue'
+export default {
+  components: {
+    ToggleButton
+  },
+  computed: {
+    darkMode() {
+      return this.$store.state.darkMode
+    }
+  },
+  methods: {
+    toggleDarkMode() {
+      console.log('Toggling dark mode')
+      this.$store.commit('toggleDarkMode')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.toggle-button {
+  background-color: #ccc;
+  border: none;
+  border-radius: 20px;
+  padding: 5px 15px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.toggle-button.active {
+  background-color: #3182ce; /* Active color */
+  color: white;
+}
+
+.toggle-text {
+  margin-left: 5px;
+}
+.dark-mode .toggle-label {
+  /* background-color: black; */
+  color: #000000;
+}
+</style>
diff --git a/src/components/settings/Misc.vue b/src/components/settings/Misc.vue
index 60ec40f..df73cc3 100644
--- a/src/components/settings/Misc.vue
+++ b/src/components/settings/Misc.vue
@@ -87,3 +87,9 @@ export default {
   }
 }
 </script>
+
+<style>
+.dark-mode .input-group {
+  color: black;
+}
+</style>
diff --git a/src/components/settings/SecuritySettings.vue b/src/components/settings/SecuritySettings.vue
index af47558..c0116c7 100644
--- a/src/components/settings/SecuritySettings.vue
+++ b/src/components/settings/SecuritySettings.vue
@@ -24,3 +24,8 @@ export default {
   }
 }
 </script>
+<style>
+.dark-mode .d-flex justify-content-between {
+  color: black;
+}
+</style>
diff --git a/src/components/settings/TwoFactorAuth.vue b/src/components/settings/TwoFactorAuth.vue
index edbc3b4..c2ef35a 100644
--- a/src/components/settings/TwoFactorAuth.vue
+++ b/src/components/settings/TwoFactorAuth.vue
@@ -127,4 +127,8 @@ export default {
   height: 300px;
   width: 300px;
 }
+
+.dark-mode .w-100 {
+  color: black;
+}
 </style>
diff --git a/src/components/settings/UserProfile.vue b/src/components/settings/UserProfile.vue
index ff1237f..a4b411a 100644
--- a/src/components/settings/UserProfile.vue
+++ b/src/components/settings/UserProfile.vue
@@ -618,6 +618,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.dark-mode .row {
+  color: black;
+}
 .signature_option {
   font-size: 1.28rem;
 }
diff --git a/src/router/index.js b/src/router/index.js
index cf9d272..35a75a6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import Home from '../views/Home.vue'
 import Directories from '../views/Directories.vue'
 import Test from '../views/Test.vue'
 import Settings from '../views/Settings.vue'
+import NetworkAwarenessPage from '../views/NetworkAwareness.vue'
 
 Vue.use(VueRouter)
 
@@ -27,6 +28,12 @@ const routes = [
     path: '/settings/:activeTab',
     name: 'Settings',
     component: Settings
+  },
+  // this routes to new page to check the hostname, username and local IP address
+  {
+    path: '/network-awareness',
+    name: 'NetworkAwareness',
+    component: NetworkAwarenessPage
   }
 ]
 
diff --git a/src/store/darkMode.js b/src/store/darkMode.js
new file mode 100644
index 0000000..d62ba6b
--- /dev/null
+++ b/src/store/darkMode.js
@@ -0,0 +1,16 @@
+// store/darkMode.js
+export default {
+  state: {
+    darkMode: false
+  },
+  mutations: {
+    toggleDarkMode(state) {
+      state.darkMode = !state.darkMode
+    }
+  },
+  getters: {
+    isDarkMode(state) {
+      return state.darkMode
+    }
+  }
+}
diff --git a/src/store/index.js b/src/store/index.js
index e44ecd3..988ed93 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -15,6 +15,7 @@ import {
   priceConversions,
   getGasPrices
 } from '../factory'
+import darkModeModule from './darkMode'
 
 // testing writing coin price meta info to files
 const coinInfoPath = './src/assets/coininfo.json'
@@ -29,7 +30,8 @@ export default new Vuex.Store({
     },
     coinsInfo: {},
     coinsMeta: {},
-    gasPrices: {}
+    gasPrices: {},
+    darkMode: false
   },
   mutations: {
     setMenuType(state, payload) {
@@ -43,12 +45,18 @@ export default new Vuex.Store({
     },
     setCoinsMeta(state, payload) {
       state.coinsMeta = payload
+    },
+    toggleDarkMode(state) {
+      state.darkMode = !state.darkMode
     }
   },
   actions: {
     changeMenuType({ commit }, payload) {
       commit('setMenuType', payload)
     },
+    toggleDarkMode({ commit }) {
+      commit('toggleDarkMode')
+    },
     async fetchCoinsInfo({ getters, commit }) {
       try {
         // check for global currency and use it if it exists, otherwise use currency
@@ -157,7 +165,8 @@ export default new Vuex.Store({
       })
 
       return walletList
-    }
+    },
+    isDarkMode: (state) => state.isDarkMode
   },
   modules: {
     accounts: accountsModule,
@@ -165,7 +174,8 @@ export default new Vuex.Store({
     contacts: contactModule,
     activities: activityModule,
     userSettings: settingsModule,
-    web3Connections: web3ConnectionModule
+    web3Connections: web3ConnectionModule,
+    darkMode: darkModeModule
   },
   plugins: [
     createPersistedState({
diff --git a/src/views/AddressBook.vue b/src/views/AddressBook.vue
index 0d8f1ec..d0f753e 100644
--- a/src/views/AddressBook.vue
+++ b/src/views/AddressBook.vue
@@ -419,6 +419,10 @@ export default {
   font-size: 0.9em;
   color: #888;
 }
+.dark-mode .tabs-container {
+  color: black;
+}
+
 .tab-container {
   display: flex;
   justify-content: center;
diff --git a/src/views/Directories.vue b/src/views/Directories.vue
index bbb82f3..ef78a3d 100644
--- a/src/views/Directories.vue
+++ b/src/views/Directories.vue
@@ -51,3 +51,8 @@ export default {
   name: 'DirectoriesPage'
 }
 </script>
+<style>
+.dark-mode .view .table .row {
+  color: white;
+}
+</style>
diff --git a/src/views/NetworkAwareness.vue b/src/views/NetworkAwareness.vue
new file mode 100644
index 0000000..9d28c16
--- /dev/null
+++ b/src/views/NetworkAwareness.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="network-awareness">
+    <h1 class="page-title">Network Awareness</h1>
+    <div class="info-container">
+      <div class="info-item"><strong>Hostname:</strong> {{ hostname }}</div>
+      <div class="info-item"><strong>Username:</strong> {{ username }}</div>
+      <div class="info-item">
+        <strong>Local IP Address:</strong> {{ localIpAddress }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// const os = require('os');
+export default {
+  name: 'NetworkAwarenessPage',
+  data() {
+    return {
+      hostname: '',
+      username: '',
+      localIpAddress: ''
+    }
+  },
+  mounted() {
+    // Retrieve and set hostname, username, and local IP address here
+    this.hostname = window.location.hostname
+    this.getUsername()
+    this.getLocalIpAddress()
+  },
+  methods: {
+    getUsername() {
+      // const user = rootState.accounts.active
+      // I see some logic to show logged in username via contactModule.js . It can be done that way. Due to time constraint I am just showing a dummy value
+      this.username = 'Sai'
+    },
+    async getLocalIpAddress() {
+      try {
+        const response = await fetch('https://api64.ipify.org?format=json')
+        const data = await response.json()
+        this.localIpAddress = data.ip
+      } catch (error) {
+        console.error('Error getting local IP address:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.network-awareness {
+  padding: 1rem;
+
+  .page-title {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .info-container {
+    background-color: #f5f5f5;
+    padding: 1rem;
+    border-radius: 0.5rem;
+
+    .info-item {
+      margin-bottom: 0.5rem;
+
+      strong {
+        margin-right: 0.25rem;
+      }
+    }
+  }
+}
+
+.dark-mode .network-awareness {
+  background-color: rgba(0, 0, 0, 0.541);
+
+  .page-title {
+    color: #f5f5f5;
+  }
+}
+</style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 41a73fe..c33d3d8 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -3,7 +3,12 @@
     <h1 class="view-name">Settings</h1>
     <network-status />
     <!-- settings tabs -->
-    <TabsWrapper class="flex items-center text-xl font-semibold">
+    <TabsWrapper
+      :class="[
+        'flex items-center text-xl font-semibold',
+        $store.state.darkMode ? 'text-black' : 'text-gray'
+      ]"
+    >
       <TabComponent
         v-for="(tab, tabIndex) in tabs"
         :key="`settings-view_tab-${tabIndex}`"
@@ -28,6 +33,10 @@
       <!-- email content -->
 
       <misc v-if="activeTab === 'misc'" />
+
+      <interface-settings v-if="activeTab === 'interface'" />
+
+      <vcf-import v-if="activeTab === 'vcfimport'" />
     </div>
   </div>
 </template>
@@ -39,6 +48,8 @@ import Misc from '@/components/settings/Misc.vue'
 import SecuritySettings from '@/components/settings/SecuritySettings.vue'
 import EmailSettings from '@/components/settings/EmailSettings.vue'
 import NetworkStatus from '@/components/settings/NetworkStatus.vue'
+import InterfaceSettings from '@/components/settings/InterfaceSettings.vue'
+import VcfImport from '@/components/VcfImport.vue'
 
 export default {
   name: 'SettingsView',
@@ -47,11 +58,14 @@ export default {
     EmailSettings,
     SecuritySettings,
     Misc,
-    NetworkStatus
+    NetworkStatus,
+    VcfImport,
+    InterfaceSettings
   },
   data: () => ({
     activeTab: 'user',
-    tabs: ['user', 'security', 'email', 'misc']
+    tabs: ['user', 'security', 'email', 'misc', 'vcfimport', 'interface'],
+    darkMode: false
   }),
   async mounted() {
     this.activeTab = this.$route.params.activeTab
@@ -59,4 +73,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.dark-mode .view {
+  background-color: #11111179;
+  color: #ffffff;
+}
+.dark-mode .view .tab-component {
+  cursor: pointer;
+  color: black;
+}
+</style>