diff --git a/soke-vise/src/App.css b/soke-vise/src/App.css
index 74b5e05..4a640e8 100644
--- a/soke-vise/src/App.css
+++ b/soke-vise/src/App.css
@@ -1,38 +1,38 @@
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+    height: 40vmin;
+    pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/soke-vise/src/App.js b/soke-vise/src/App.js
index b6cd114..12903d1 100644
--- a/soke-vise/src/App.js
+++ b/soke-vise/src/App.js
@@ -1,11 +1,12 @@
 import logo from './logo.svg';
 // import './App.css';
 import MainBody from "./components/MainBody"
+
 function App() {
-  return (
-    <MainBody></MainBody>
-    
-  );
+    return ( <
+        MainBody > < /MainBody>
+
+    );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/soke-vise/src/baseUrl.js b/soke-vise/src/baseUrl.js
index c55564f..5279954 100644
--- a/soke-vise/src/baseUrl.js
+++ b/soke-vise/src/baseUrl.js
@@ -1 +1 @@
-export const baseUrl = "https://42e5-2405-201-4019-9b7b-55d1-7b40-bc65-d7ae.ngrok.io"
\ No newline at end of file
+export const baseUrl = "http://localhost:8080"
\ No newline at end of file
diff --git a/soke-vise/src/components/Card/card.css b/soke-vise/src/components/Card/card.css
index 9827919..bd8d745 100644
--- a/soke-vise/src/components/Card/card.css
+++ b/soke-vise/src/components/Card/card.css
@@ -1,51 +1,50 @@
-.title{
-	width: 912px;
-height: 26px;
-
-/* Regular text */
-
-font-family: Apercu Pro;
-font-style: normal;
-font-weight: 800;
-font-size: 40px;
-line-height: 26px;
-/* identical to box height, or 130% */
-
-
-/* Black */
-
-color: #000000;
-
-
-/* Inside Auto Layout */
-
-flex: none;
-order: 0;
-flex-grow: 0;
-margin: 20px 0px;
+.title {
+    width: 912px;
+    height: 26px;
+    /* Regular text */
+    font-family: Noto Sans;
+    font-style: normal;
+    font-weight: 800;
+    font-size: 40px;
+    line-height: 26px;
+    /* identical to box height, or 130% */
+    /* Black */
+    color: #000000;
+    /* Inside Auto Layout */
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+    margin: 20px 0px;
 }
 
-.flex-container{
-	display: flex;
-	justify-content: space-between;
+.flex-container {
+    display: flex;
+    justify-content: space-between;
 }
 
-.inner-text{
-	font-size: 20px;
-	margin-bottom: 20px;
+.inner-text {
+    font-family: Noto Sans;
+    font-style: normal;
+    /* font-weight: 800; */
+    /* font-size: 40px; */
+    font-size: 16px;
+    margin-bottom: 20px;
 }
 
-.link,.link:visited{
-	text-decoration: none;
+.link,
+.link:visited {
+    text-decoration: none;
 }
 
-.card{
-
-	/* width: 80%; */
-	padding: 20px;
-	box-sizing: border-box;
-	margin: 20px auto;
-	background: #F2F4F8;
-	border-radius: 30px;
-
-}
+.card {
+    font-family: Noto Sans;
+    /* font-style: normal; */
+    /* font-weight: 800; */
+    font-size: 12px;
+    /* width: 80%; */
+    padding: 20px;
+    box-sizing: border-box;
+    margin: 20px auto;
+    background: #F2F4F8;
+    border-radius: 30px;
+}
\ No newline at end of file
diff --git a/soke-vise/src/components/Card/index.jsx b/soke-vise/src/components/Card/index.jsx
index d1e8a58..e4b23c8 100644
--- a/soke-vise/src/components/Card/index.jsx
+++ b/soke-vise/src/components/Card/index.jsx
@@ -1,16 +1,16 @@
 import React from 'react'
 import "./card.css"
-export default function Card({title,innerText,date,link}) {
+export default function Card({ title, innerText, date, link }) {
 	return (
 		<div className="card">
-		<div className="title"	>{title}</div>
-		<div className="inner-text" div dangerouslySetInnerHTML={{ __html: innerText }}>
-			
-		</div>
-		<div className="flex-container">
-		<div className="last-visited"> {date}</div>
-		<a className="link" href={link}>visit</a>
-		</div>
+			<div className="title"	>{title}</div>
+			<div className="inner-text" div dangerouslySetInnerHTML={{ __html: innerText }}>
+
+			</div>
+			<div className="flex-container">
+				<div className="last-visited"> {date}</div>
+				<a className="link" href={link}>visit</a>
+			</div>
 		</div>
 	)
 }
diff --git a/soke-vise/src/components/MainBody/index.jsx b/soke-vise/src/components/MainBody/index.jsx
index 70cf6e3..736a528 100644
--- a/soke-vise/src/components/MainBody/index.jsx
+++ b/soke-vise/src/components/MainBody/index.jsx
@@ -33,8 +33,8 @@ export default function MainBody() {
 
 
 		})
-		if(lis.length===0){
-			lis=[{title:"No data found",url:"",lastaccessed:"",dom:""}]
+		if (lis.length === 0) {
+			lis = [{ title: "No data found", url: "", lastaccessed: "", dom: "" }]
 		}
 		return lis
 
@@ -165,7 +165,7 @@ export default function MainBody() {
 
 				}
 
-				
+
 			</div>
 		</div>
 	)
diff --git a/soke-vise/src/components/MainBody/mainBody.css b/soke-vise/src/components/MainBody/mainBody.css
index 759d7e3..194e9cd 100644
--- a/soke-vise/src/components/MainBody/mainBody.css
+++ b/soke-vise/src/components/MainBody/mainBody.css
@@ -1,8 +1,9 @@
 body {
-        background: #F2F4F8;
-    }
-    .main-container{
-            background: white;
+    background: #F2F4F8;
+}
+
+.main-container {
+    background: white;
     height: 80vh;
     padding: 24px;
     margin: 50px;
@@ -11,180 +12,160 @@ body {
     justify-content: space-evenly;
     margin-bottom: 0px;
     border-radius: 20px;
-        
-    }
+}
+
+.top-container {
+    display: flex;
+    height: 10%;
+    justify-content: space-evenly;
+}
 
-    .top-container {
+.search-bar {
+    /* Input field background */
+    width: 60%;
+    height: 74px;
+    background: #F2F4F8;
+    border-radius: 12px;
+    outline: none;
+    border-style: none;
+    /* Inside Auto Layout */
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+    padding-left: 40px;
+    font-family: Apercu Pro;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 26px;
+    color: #000;
+}
 
+.search-button {
+    width: 15%;
+    height: 74px;
+    border-style: none;
+    color: white;
+    border-radius: 12px;
+    background: black;
+    font-family: Apercu Pro;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 26px;
+}
 
-        display: flex;
-        height: 10%;
-        justify-content: space-evenly;
-    }
+.select-box {
+    width: 15%;
+    position: relative;
+}
 
-    .search-bar {
+.select {
+    width: 100%;
+    overflow: hidden;
+    height: 74px;
+    font-size: 20px;
+    box-sizing: border-box;
+    border-radius: 12px;
+    outline: none;
+    border-style: none;
+    border: 2px solid #F2F4F8;
+    background: white;
+}
 
-        /* Input field background */
-        width: 60%;
-        height: 74px;
-        background: #F2F4F8;
-        border-radius: 12px;
-        outline: none;
-        border-style: none;
-        /* Inside Auto Layout */
+.drop-down-item {
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 5px;
+    background: #F2F4F8;
+    font-family: Apercu Pro;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 26px;
+    color: #000;
+}
 
-        flex: none;
-        order: 0;
-        flex-grow: 0;
+.selected-container {
+    display: flex;
+    margin-top: 10px;
+}
 
-        padding-left: 40px;
-        font-family: Apercu Pro;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 20px;
-        line-height: 26px;
-        color: #000;
-
-    }
+.drop-downs {
+    position: absolute;
+    z-index: 1;
+    flex-direction: column;
+    display: flex;
+    width: 100%;
+}
 
+.bottom-selected-items {
+    margin: 10px;
+    padding: 10px;
+    position: relative;
+    box-sizing: border-box;
+    border-radius: 12px;
+    display: flex;
+    justify-content: space-between;
+    outline: none;
+    background: #F2F4F8;
+    border-style: none;
+}
 
-    .search-button {
+.cross-icon {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    outline: none;
+    border-style: none;
+    /* border:2px solid rgb(112, 65, 65); */
+    border-radius: 50px;
+}
 
+.card-container {
+    height: 600px;
+    overflow: scroll;
+    /* margin-top: 20px; */
+    overflow-x: hidden;
+    height: 80%;
+    /* overflow-y:visible; */
+}
 
-        width: 15%;
-        height: 74px;
-        border-style: none;
-        color: white;
-        border-radius: 12px;
-        background: black;
-
-        font-family: Apercu Pro;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 20px;
-        line-height: 26px;
-    }
-    .select-box{
-        width: 15%;
-        position: relative;
-    }
-
-
-    .select {
-
-
-
-
-        width: 100%;
-
-        overflow: hidden;
-        height: 74px;
-        font-size: 20px;
-        box-sizing: border-box;
-        border-radius: 12px;
-        outline: none;
-        border-style: none;
-        border:2px solid #F2F4F8;
-        background: white;
-
-    }
-
-    .drop-down-item {
-        border: 1px solid white;
-        border-radius: 5px;
-        padding: 5px;
-        background:#F2F4F8 ;
-        
-        font-family: Apercu Pro;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 20px;
-        line-height: 26px;
-        color: #000;
-
-
-    }
-
-    .selected-container{
-        display: flex;
-        margin-top: 10px;
-    }
-
-    .drop-downs{
-        position: absolute;
-        z-index: 1;
-        flex-direction: column;
-        display: flex;
-        width: 100%;
-
-    }
-
-
-    .bottom-selected-items{
-        
-        
-
-
-        margin: 10px;
-        padding: 10px;
-        position: relative;
-        box-sizing: border-box;
-        border-radius: 12px;
-        display: flex;
-        justify-content: space-between;
-        outline: none;
-        background: #F2F4F8;
-
-        border-style: none;
-
-    }
-    .cross-icon{
-        position: absolute;
-        top:-10px;
-        right: -10px;
-        outline: none;
-        border-style: none;
-        /* border:2px solid rgb(112, 65, 65); */
-        border-radius: 50px;
-    }
-
-
-    .card-container{
-        height:  600px;
-        overflow: scroll;
-        /* margin-top: 20px; */
-        overflow-x: hidden;
-        height: 80%;
-        /* overflow-y:visible; */
-    }
 .card-container::-webkit-scrollbar {
-width: 20px;
+    width: 20px;
 }
 
-.loading{
+.loading {
     font-size: 50px;
 }
+
+
 /* Track */
+
 .card-container::-webkit-scrollbar-track {
-background: white;
-border-radius: 10px;
+    background: white;
+    border-radius: 10px;
 }
 
+
 /* Handle */
+
 .card-container::-webkit-scrollbar-thumb {
-background:#EDF6F8; 
-height: 75px;
-border: 5px solid white;
-background-clip: padding-box;
-/* border-radius: 10px; */
+    background: #EDF6F8;
+    height: 75px;
+    border: 5px solid white;
+    background-clip: padding-box;
+    /* border-radius: 10px; */
 }
 
+
 /* Handle on hover */
+
 .card-container::-webkit-scrollbar-thumb:hover {
-background:#EDF6F8; 
+    background: #EDF6F8;
 }
 
-    em{
-        font-weight: 900;
-        font-style: normal;
-    }
\ No newline at end of file
+em {
+    font-weight: 900;
+    font-style: normal;
+}
\ No newline at end of file
diff --git a/soke-vise/src/index.css b/soke-vise/src/index.css
index ec2585e..7b704c7 100644
--- a/soke-vise/src/index.css
+++ b/soke-vise/src/index.css
@@ -1,13 +1,10 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
\ No newline at end of file
diff --git a/soke-vise/src/index.js b/soke-vise/src/index.js
index 34a56df..caf0eab 100644
--- a/soke-vise/src/index.js
+++ b/soke-vise/src/index.js
@@ -3,8 +3,7 @@ import ReactDOM from 'react-dom';
 // import './index.css';
 import App from './App';
 
-ReactDOM.render(
-    <App />,
-  document.getElementById('root')
-);
-
+ReactDOM.render( <
+    App / > ,
+    document.getElementById('root')
+);
\ No newline at end of file