diff --git a/src/app/App.tsx b/src/app/App.tsx
index 6ae7687..755f0c8 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -88,114 +88,40 @@ export function App(): React.JSX.Element {
   
 
   return (
-      <div style={{ padding: '10px 20px'}}>
+      <div className="container">
       <Header isConnected={ !error} />
-      {error && <div style={{border: '2px solid black',
-        backgroundColor: '#0e1111',
-          color: 'red',
-          // minWidth: '1175px',
-          // maxWidth: '1175px',
-          padding: '20px',
-          borderRadius: '9px',
-          display: "flex",
-        boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',marginBottom:"10px"}}> Pieces OS is not running in the background. Click You're Not Connected to connect </div>}
-        <div style={{display:'flex',flex:1,flexDirection:'row-reverse'}}>
-        <div style={{border: '2px solid black',
-          backgroundColor: '#0e1111',
-          height: '600px',
-          minWidth: '250px',
-          // maxWidth: '1175px',
-          padding: '20px',
-          borderRadius: '9px',
-          display: "flex",
-          flex:1,
-          flexDirection: 'column',
-          boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',}}>
-            <h3 style={{color: 'white', fontWeight: 'normal' }}>Workflow Activity</h3>
+      {error && <div className="error-container"> Pieces OS is not running in the background. Click You're Not Connected to connect </div>}
+        <div className="flex-container">
+        <div className="workflow-activity-container">
+            <h3 className="activity-heading">Workflow Activity</h3>
             <WorkflowActivityList />
         </div>
-        <div style={{
-          // width: "auto",
-          border: '2px solid yellow',
-          backgroundColor: '#0e1111',
-          height: '600px',
-          minWidth: '1000px',
-          // maxWidth: '1175px',
-          padding: '20px',
-          borderRadius: '9px',
-          display: "flex",
-          flex: 1,
-          marginRight: '10px',
-          boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',
-        }}>
-          <div style={{minHeight: '100%', display: "flex", flexDirection: "column", justifyContent: 'space-between'}}>
-
-            <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-              <h2 style={{color: 'white', fontWeight: 'normal', margin: '5px'}}>Saved Snippets</h2>
-              <button style={{
-                maxWidth: 'fit-content',
-                height: 'fit-content',
-                marginLeft: '10px',
-                backgroundColor: "black",
-                border: '1px solid white',
-                borderRadius: '5px',
-                padding: '8px 24px',
-                color: 'white',
-                flexWrap: 'nowrap',
-                cursor: 'pointer',
-                fontSize: '12px'
-              }} onClick={refreshSnippetList}>Refresh Snippet List
+        <div className="snippets-container">
+          <div className="snippets-header">
+            <div className="snippets-subheader">
+              <h2 className="snippets-heading">Saved Snippets</h2>
+              <button className="refresh-btn" onClick={refreshSnippetList}>Refresh Snippet List
               </button>
-        <button style={{
-                maxWidth: 'fit-content',
-                height: 'fit-content',
-                marginLeft: '10px',
-                backgroundColor: "black",
-                border: '1px solid white',
-                borderRadius: '5px',
-                padding: '8px 24px',
-                color: 'white',
-                flexWrap: 'nowrap',
-                cursor: 'pointer',
-                fontSize: '12px'
-              }} onClick={handleDeSelect}>DESELECT
+        <button className="deselect-btn" onClick={handleDeSelect}>DESELECT
               </button>
               <DeleteAssetButton assetID={((selectedIndex < array.length && selectedIndex!=-1) ? array[selectedIndex].id : "" )} selectedIndex={selectedIndex} setArray={setArray}/>
             </div>
 
-            <div style={{
-              overflowY: "scroll",
-              minWidth: '700px',
-              minHeight: "80%",
-              paddingRight: '5px',
-              display: "grid",
-              gridTemplateColumns: 'repeat(3, 1fr)',
-              gridTemplateRows: 'repeat(3, 1fr)',
-              gap: '5px'
-            }}>
+            <div className="snippets-grid">
               {array.map((item: LocalAsset, index) => (
                 <div
                   onKeyDown={handleKeyPress}
                   tabIndex={0}
                   key={index}
+                  className="snippet-item"
                   style={{
-                    margin: '5px',
-                    alignItems: 'center',
-                    padding: "10px",
-                    borderRadius: '5px',
-                    height: '200px',
-                    width: '200px',
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: "space-between",
                     backgroundColor: selectedIndex == index ? 'lightblue' : 'white', // Add background color based on selection
-                    cursor: 'pointer' // Add cursor style to indicate clickability
                   }}
                   onClick={() => handleSelect(index)}
                 >
                   <div>
                     <h3>{item.name}</h3>
-                    <div style={{flexDirection: "column"}}>
+                    <div className="snippet-details">
                       <p>{item.id}</p>
                       <p>{item.classification}</p>
                     </div>
@@ -206,8 +132,8 @@ export function App(): React.JSX.Element {
             </div>
           </div>
 
-          <div style={{display: 'flex', flexDirection: 'column', padding: '10px', maxHeight: '90%', alignSelf: 'end',marginLeft:'10px'}}>
-            <h3 style={{color: 'white', fontWeight: 'normal' }}>Create a New Snippet</h3>
+          <div className="snippet-grid-container">
+            <h3 className="snippets-heading-2">Create a New Snippet</h3>
             <DataTextInput applicationData={applicationData}/>
             <RenameAssetInput assetID={((selectedIndex < array.length && selectedIndex!=-1) ? array[selectedIndex].id : "")}/>
 
@@ -216,18 +142,7 @@ export function App(): React.JSX.Element {
         </div>
 
         {/* this is the copilot container. the copilot logic is inside the /components/Copilot.tsx */}
-        <div style={{
-          border: '2px solid black',
-          backgroundColor: '#0e1111',
-          height: '600px',
-          // minWidth: '1175px',
-          // maxWidth: '1175px',
-          padding: '20px',
-          borderRadius: '9px',
-          display: "flex",
-          boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',
-          marginTop: '20px'
-        }}>
+        <div className="copilot-container">
             <CopilotChat />
         </div>
 
diff --git a/src/app/global.css b/src/app/global.css
index b2dcd9f..1a9e165 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -1,7 +1,7 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+/* <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> */
 
 html {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 ::-webkit-scrollbar {
@@ -21,4 +21,151 @@ html {
   background-color: #b3b2b2;
 }
 
+.container {
+  padding: 10px 20px;
+}
+
+.error-container {
+  border: 2px solid black;
+  background-color: #0e1111;
+  color: red;
+  /* minWidth: '1175px',
+  maxWidth: '1175px', */
+  padding: 20px;
+  border-radius: 9px;
+  display: flex;
+  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
+  margin-bottom: 10px;
+}
+
+.flex-container {
+  display: flex;
+  flex: 1;
+  flex-direction: row-reverse;
+}
+
+.workflow-activity-container {
+  border: 2px solid black;
+  background-color: #0e1111;
+  height: 600px;
+  min-width: 250px;
+  /* maxWidth: '1175px', */
+  padding: 20px;
+  border-radius: 9px;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
+}
+
+.activity-heading {
+  color: white;
+  font-weight: normal;
+}
+
+.snippets-container {
+  /* width: "auto", */
+  border: 2px solid yellow;
+  background-color: #0e1111;
+  height: 600px;
+  min-width: 1000px;
+  /* maxWidth: '1175px', */
+  padding: 20px;
+  border-radius: 9px;
+  display: flex;
+  flex: 1;
+  margin-right: 10px;
+  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
+}
+
+.snippets-header {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.snippets-subheader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.snippets-heading {
+  color: white;
+  font-weight: normal;
+  margin: 5px;
+}
+
+.snippets-heading-2 {
+  color: white;
+  font-weight: normal;
+}
+
+.snippet-grid-container {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  max-height: 90%;
+  align-self: end;
+  margin-left: 10px;
+}
+
+.refresh-btn,
+.deselect-btn {
+  max-width: fit-content;
+  height: fit-content;
+  margin-left: 10px;
+  background-color: black;
+  border: 1px solid white;
+  border-radius: 5px;
+  padding: 8px 24px;
+  color: white;
+  flex-wrap: nowrap;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.snippets-grid {
+  overflow-y: scroll;
+  min-width: 700px;
+  min-height: 80%;
+  padding-right: 5px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 5px;
+}
+
+.snippet-item {
+  margin: 5px;
+  align-items: center;
+  padding: 10px;
+  border-radius: 5px;
+  height: 200px;
+  width: 200px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  /* background-color: white; */
+  cursor: pointer; /* Add cursor style to indicate clickability */
+}
+
+.snippet-item.selected {
+  background-color: lightblue;
+}
+
+.snippet-details {
+  flex-direction: column;
+}
 
+.copilot-container {
+  border: 2px solid black;
+  background-color: #0e1111;
+  height: 600px;
+  padding: 20px;
+  border-radius: 9px;
+  display: flex;
+  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
+  margin-top: 20px;
+}